#e8e8e8
1button { 2 padding: 0; 3 margin: 0; 4 border: none; 5 background: none; 6} 7 8button { 9 --primary-color: #111; 10 --hovered-color: #c84747; 11 position: relative; 12 display: flex; 13 font-weight: 600; 14 font-size: 20px; 15 gap: 0.5rem; 16 align-items: center; 17} 18 19button p { 20 margin: 0; 21 position: relative; 22 font-size: 20px; 23 color: var(--primary-color) 24} 25 26button::after { 27 position: absolute; 28 content: ""; 29 width: 0; 30 left: 0; 31 bottom: -7px; 32 background: var(--hovered-color); 33 height: 2px; 34 transition: 0.3s ease-out; 35} 36 37button p::before { 38 position: absolute; 39/* box-sizing: border-box; */ 40 content: "Subscribe"; 41 width: 0%; 42 inset: 0; 43 color: var(--hovered-color); 44 overflow: hidden; 45 transition: 0.3s ease-out; 46} 47 48button:hover::after { 49 width: 100%; 50} 51 52button:hover p::before { 53 width: 100%; 54} 55 56button:hover svg { 57 transform: translateX(4px); 58 color: var(--hovered-color) 59} 60 61button svg { 62 color: var(--primary-color); 63 transition: 0.2s; 64 position: relative; 65 width: 15px; 66 transition-delay: 0.2s; 67}
12K views
12K views
Comments
MIT License