![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by
mrhyddenn
#212121
1button { 2 background: transparent; 3 color: #fff; 4 font-size: 17px; 5 text-transform: uppercase; 6 font-weight: 600; 7 border: none; 8 padding: 20px 30px; 9 cursor: pointer; 10 perspective: 30rem; 11 border-radius: 10px; 12 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308); 13} 14 15button::before { 16 content: ""; 17 display: block; 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 top: 0; 22 left: 0; 23 border-radius: 10px; 24 background: linear-gradient( 25 320deg, 26 rgba(0, 140, 255, 0.678), 27 rgba(128, 0, 128, 0.308) 28 ); 29 z-index: 1; 30 transition: background 3s; 31} 32 33button:hover::before { 34 animation: rotate 1s; 35 transition: all 0.5s; 36} 37 38@keyframes rotate { 39 0% { 40 transform: rotateY(180deg); 41 } 42 43 100% { 44 transform: rotateY(360deg); 45 } 46} 47
13K views
13K views
Variations
1 MIT License