Button by htwarriors108
#212121
1button { 2 background-color: #fff; 3 position: relative; 4 list-style: none; 5 width: 60px; 6 height: 60px; 7 border-radius: 60px; 8 cursor: pointer; 9 box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1); 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 transition: 0.5s; 14 border: none; 15} 16 17button:active { 18 scale: 1.2; 19} 20 21button:hover { 22 width: 180px; 23 box-shadow: 0px 10px 25px rgba(0, 0, 0, 0); 24} 25 26button::before { 27 content: ''; 28 position: absolute; 29 inset: 0; 30 border-radius: 50px; 31 background: linear-gradient(45deg, var(--i), var(--j)); 32 opacity: 0; 33 transition: 0.5s; 34} 35 36button:hover::before { 37 opacity: 1; 38} 39 40button::after { 41 content: ''; 42 position: absolute; 43 top: 10px; 44 width: 100%; 45 height: 100%; 46 border-radius: 60px; 47 background: linear-gradient(45deg, var(--i), var(--j)); 48 filter: blur(15px); 49 transition: 0.5s; 50 z-index: -1; 51 opacity: 0; 52} 53 54button:hover::after { 55 opacity: 0.5; 56} 57 58button svg { 59 color: #777; 60 width: auto; 61 height: 30px; 62 transition: 0.5s; 63 transition-delay: 0.25s; 64} 65 66button:hover svg { 67 transform: scale(0); 68 color: #fff; 69 transition-delay: 0s; 70} 71 72button span { 73 position: absolute; 74} 75 76button .title { 77 color: #fff; 78 font-size: 1.3em; 79 text-transform: uppercase; 80 letter-spacing: 0.1em; 81 transform: scale(0); 82 transition: 0.5s; 83 transition-delay: 0s; 84 font-weight: 600; 85} 86 87button:hover .title { 88 transform: scale(1); 89 transition-delay: 0.25s; 90}
881 views
881 views
MIT License