Button by vikas7754
#212121
1.box { 2 background: linear-gradient(to right, gold, darkorange); 3 color: white; 4 --width: 200px; 5 --height: calc(var(--width) / 3); 6 width: var(--width); 7 height: var(--height); 8 text-align: center; 9 line-height: var(--height); 10 font-size: calc(var(--height) / 2.5); 11 font-family: sans-serif; 12 letter-spacing: 0.2em; 13 border: 1px solid darkgoldenrod; 14 border-radius: 2em; 15 transform: perspective(500px) rotateY(-15deg); 16 text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2); 17 box-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8); 18 transition: 0.5s; 19 position: relative; 20 overflow: hidden; 21 cursor: pointer; 22} 23 24.box:hover { 25 transform: perspective(500px) rotateY(15deg); 26 text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2); 27 box-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8); 28} 29 30.box::before { 31 content: ''; 32 position: absolute; 33 width: 100%; 34 height: 100%; 35 background: linear-gradient(to right, transparent, white, transparent); 36 left: -100%; 37 transition: 0.5s; 38} 39 40.box:hover::before { 41 left: 100%; 42}
375 views
375 views
MIT License