Button by KSAplay
#212121
1.btn { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 overflow: hidden; 7 padding: 1em 2em; 8 font-size: 15px; 9 font-weight: bold; 10 border-width: 0; 11 border-radius: 1.5em; 12 text-transform: uppercase; 13 transition: .2s ease; 14} 15 16.text { 17 font-size: 1.2em; 18 color: white; 19 z-index: 1; 20} 21 22.btn::before { 23 position: absolute; 24 content: ''; 25 width: 120%; 26 height: 260%; 27 background-image: linear-gradient(135deg, rgba(0,5,255,1) 0%, rgba(255,0,159,1) 100%); 28} 29 30.btn::after { 31 position: absolute; 32 content: ''; 33 width: 88%; 34 height: 80%; 35 border-width: 0; 36 border-radius: 1.2em; 37 background-color: black; 38 opacity: .7; 39 transition: 100ms ease; 40} 41 42.btn:hover.btn { 43 transform: scale(1.1); 44} 45 46.btn:hover.btn::after { 47 opacity: .5; 48} 49 50.btn:hover.btn::before { 51 animation: turn_4810 .4s infinite linear; 52} 53 54.btn:active.btn { 55 transform: scale(1.05); 56} 57 58.btn:active.btn::before { 59 transform: scale(1.05); 60 animation: turn_4810 .2s infinite linear; 61} 62 63@keyframes turn_4810 { 64 0% { 65 transform: rotate(0deg); 66 } 67 68 100% { 69 transform: rotate(360deg); 70 } 71} 72 73
1.1K views
1.1K views
MIT License