#212121
1button { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 width: 100px; 6 position: relative; 7 cursor: pointer; 8 height: 100px; 9 border-radius: 100px; 10 border: none; 11 background: #333; 12 color: #e5e5e5; 13 font-weight: 600; 14 box-shadow: inset 20px 20px 39px #080a10, 15 inset -20px -20px 39px #1b263e; 16 font-size: 13px; 17} 18 19button::after { 20 content: ''; 21 position: absolute; 22 z-index: -1; 23 left: -10px; 24 top: -10px; 25 border-radius: 50%; 26 width: calc(100% + 20px); 27 height: calc(100% + 20px); 28 background: linear-gradient(35deg, rgb(47, 190, 238), rgb(218, 57, 143), rgb(139, 255, 23)); 29 filter: blur(10px); 30} 31 32button:hover::after { 33 animation: rotcirclegr 1s linear infinite; 34} 35 36@keyframes rotcirclegr { 37 to { 38 transform: rotate(360deg); 39 } 40}
2.3K views
2.3K views
Comments
MIT License