Button by JaydipPrajapati1910
#e8e8e8
1.button { 2 width: 160px; 3 height: 55px; 4 transition: all 0.2s; 5 position: relative; 6 cursor: pointer; 7 background: none; 8 outline: none; 9 border: none; 10} 11 12.button-inner { 13 width: inherit; 14 height: inherit; 15 background: rgba(255,255,255,.05); 16 box-shadow: 0 0 10px rgba(0,0,0,0.25); 17 backdrop-filter: blur(10px); 18 border-radius: 8px; 19 display: flex; 20 text-align: center; 21 justify-content: center; 22 align-items: center; 23 font-size: 20px; 24 font-weight: 900; 25 letter-spacing: .1em; 26 color: blue; 27} 28 29.button:hover { 30 transform: scale(1.04) rotate(1deg); 31} 32 33.circle { 34 width: 20px; 35 height: 20px; 36 background: radial-gradient(blue,darkblue); 37 border-radius: 50%; 38 position: absolute; 39 animation: move-up6 2s ease-in infinite alternate-reverse; 40} 41 42.circle:nth-child(1) { 43 top: 0px; 44 left: 0px; 45} 46 47.circle:nth-child(2) { 48 bottom: 0px; 49 right: 0px; 50 animation-name: move-down1; 51} 52 53@keyframes move-up6 { 54 to { 55 transform: translateY(-5px); 56 } 57} 58 59@keyframes move-down1 { 60 to { 61 transform: translateY(5px); 62 } 63} 64 65
795 views
795 views
MIT License