Button by tomaskriegelstein
#212121
1button { 2 font-size: 18px; 3 color: grey; 4 font-family: Poppins; 5 font-weight: 400; 6 cursor: pointer; 7 position: relative; 8 border: none; 9 background: none; 10 11 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 12 transition-duration: 400ms; 13 transition-property: color; 14 display: inline-flex; 15 align-items: center; 16} 17 18button:focus, 19button:hover { 20 color: white; 21} 22 23button:focus:after, 24button:hover:after { 25 width: 100%; 26 right: ; 27 left: auto; /* Ensure left is auto to override the initial value */ 28} 29 30button:after { 31 content: ""; 32 pointer-events: none; 33 bottom: -7px; 34 right: auto; /* Start from the right */ 35 left: 0; /* Ensure left is auto to override the initial value */ 36 position: absolute; 37 width: 0%; 38 height: 1px; 39 background-color: #fff; 40 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 41 transition-duration: 500ms; 42 transition-property: width, right; 43} 44 45.svg-icon { 46 width: 0.9em; 47 height: 0.8em; 48 margin-left: 10px; 49 fill: grey; 50 transform: rotate(-45deg); 51 transition: transform 0.5s ease-out; 52} 53 54button:hover .svg-icon { 55 transform: rotate(0deg); 56 fill: white; 57} 58
100 views
Variation of abutton
MIT License