Button by Deri-Kurniawan
#e8e8e8
1.button { 2 position: relative; 3 display: inline-block; 4 padding: 16px 32px; 5 border-radius: 14px; 6 overflow: hidden; 7 z-index: 1; 8 border: 1px solid rgb(221, 218, 218); 9 background: white; 10 font-weight: bold; 11 font-size: 16px; 12 color: #1993e4; 13 transition: all 1.2s linear; 14 cursor: pointer; 15} 16 17.button::after { 18 content: ""; 19 position: absolute; 20 background: linear-gradient(to right, #1993e4, #1993e456); 21 border-radius: 30%; 22 height: 96px; 23 width: 96px; 24 animation: spin infinite linear 1.8s; 25 animation-delay: 0; 26 bottom: -38px; 27 right: -112px; 28 transition: all 1.2s linear; 29 z-index: 0; 30} 31 32.button:hover { 33 color: #fff; 34 transition-duration: 1.2s; 35} 36 37.button:hover::after { 38 right: -60px; 39 bottom: -92px; 40 width: 256px; 41 height: 256px; 42} 43 44.button > .button-content { 45 position: relative; 46 z-index: 2; 47} 48 49@keyframes spin { 50 0% { 51 transform: rotate(0deg); 52 } 53 100% { 54 transform: rotate(360deg); 55 } 56} 57
301 views
301 views
MIT License