This post is saved as a draft.
#e8e8e8
1.cta { 2 border: none; 3 background: none; 4 cursor: pointer; 5} 6 7.cta span { 8 padding-bottom: 7px; 9 letter-spacing: 4px; 10 font-size: 14px; 11 padding-right: 15px; 12 text-transform: uppercase; 13} 14 15.cta svg { 16 transform: translateX(-8px); 17 transition: all 0.3s ease; 18} 19 20.cta:hover svg { 21 transform: translateX(0); 22} 23 24.cta:active svg { 25 transform: scale(0.9); 26} 27 28.hover-underline-animation { 29 position: relative; 30 color: black; 31 padding-bottom: 20px; 32} 33 34.hover-underline-animation:after { 35 content: ""; 36 position: absolute; 37 width: 100%; 38 transform: scaleX(0); 39 height: 2px; 40 bottom: 0; 41 left: 0; 42 background-color: #000000; 43 transform-origin: bottom right; 44 transition: transform 0.25s ease-out; 45} 46 47.cta:hover .hover-underline-animation:after { 48 transform: scaleX(1); 49 transform-origin: bottom left; 50} 51
Variation of abutton
Variation of abutton