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