Button by MuhammadHasann
#212121
1.button { 2 --dark: #181818; 3 --light: #d9d9d9; 4 --active: 0; 5 6 cursor: pointer; 7 position: relative; 8 9 display: flex; 10 align-items: center; 11 gap: 0.5rem; 12 13 transform-origin: center; 14 15 background-color: transparent; 16 17 border: none; 18} 19 20.button:hover { 21 --active: 1; 22} 23 24.icon_cont { 25 overflow: clip; 26 27 display: flex; 28 justify-content: center; 29 align-items: center; 30 31 width: calc(var(--active) * 1.5rem + (1 - var(--active)) * 0.5rem); 32 height: calc(var(--active) * 1.5rem + (1 - var(--active)) * 0.5rem); 33 background-color: hsla(0, 0%, 85%, var(--active)); 34 35 border: 1px solid var(--light); 36 border-radius: 9999px; 37 transition: all 0.5s ease-in-out; 38} 39 40.icon { 41 font-size: 0.75rem; 42 color: var(--dark); 43 line-height: 1rem; 44 45 transform: translateX(calc(-1rem * (1 - var(--active)))); 46 transition: transform 0.5s ease-in-out; 47} 48 49.text_button { 50 position: relative; 51 52 display: inline-block; 53 54 padding-block: 0.5rem; 55 56 font-size: 1rem; 57 font-weight: 600; 58 color: var(--light); 59 60 text-transform: capitalize; 61} 62.text_button::before { 63 content: ""; 64 65 position: absolute; 66 bottom: 0; 67 right: 0; 68 69 width: calc((1 - var(--active)) * 100%); 70 height: 1px; 71 background-color: var(--light); 72 73 border-radius: 9999px; 74 transition: width 0.5s ease-in-out; 75} 76
Â
247 views
247 views
MIT License