Button by MuhammadHasann
#212121
1.button { 2 cursor: pointer; 3 --c: #0ea5e9; 4 padding: 12px 28px; 5 margin: 1em; 6 position: relative; 7 min-width: 12em; 8 background: transparent; 9 font-size: 12px; 10 font-weight: bold; 11 color: var(--c); 12 text-align: center; 13 text-transform: uppercase; 14 font-family: sans-serif; 15 letter-spacing: 0.1em; 16 border: 2px solid var(--c); 17 border-radius: 8px; 18 overflow: hidden; 19 z-index: 1; 20 transition: 0.5s; 21} 22 23.button span { 24 position: absolute; 25 width: 25%; 26 height: 100%; 27 background-color: var(--c); 28 transform: translateY(150%); 29 border-radius: 50%; 30 left: calc((var(--n) - 1) * 25%); 31 transition: 0.5s; 32 transition-delay: calc((var(--n) - 1) * 0.1s); 33 z-index: -1; 34} 35 36.button:hover { 37 color: black; 38} 39 40.button:hover span { 41 transform: translateY(0) scale(2); 42} 43 44.button span:nth-child(1) { 45 --n: 1; 46} 47 48.button span:nth-child(2) { 49 --n: 2; 50} 51 52.button span:nth-child(3) { 53 --n: 3; 54} 55 56.button span:nth-child(4) { 57 --n: 4; 58} 59
245 views
245 views
MIT License