Button by JaydipPrajapati1910
#e8e8e8
1button { 2 font-size: 18px; 3 color: #222; 4 font-family: inherit; 5 font-weight: 800; 6 cursor: pointer; 7 position: relative; 8 border: none; 9 background: none; 10 text-transform: uppercase; 11 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 12 transition-duration: 400ms; 13 transition-property: color; 14} 15 16button:focus, 17button:hover { 18 color: #222; 19} 20 21button:focus:after, 22button:hover:after { 23 width: 100%; 24 left: 0%; 25} 26 27button:after { 28 content: ""; 29 pointer-events: none; 30 bottom: -2px; 31 left: 50%; 32 position: absolute; 33 width: 0%; 34 height: 2px; 35 background-color: red; 36 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 37 transition-duration: 400ms; 38 transition-property: width, left; 39}
1.2K views
Variation of abutton
Variations
1 MIT License