This post is saved as a draft.
This post is saved as a draft.
#e8e8e8
1.cta { 2 position: relative; 3 margin: auto; 4 padding: 12px 18px; 5 transition: all 0.2s ease; 6 border: none; 7 background: none; 8 cursor: pointer; 9} 10 11.cta:before { 12 content: ""; 13 position: absolute; 14 top: 0; 15 left: 0; 16 display: block; 17 border-radius: 50px; 18 background: #dfceff; 19 width: 45px; 20 height: 45px; 21 transition: all 0.3s ease; 22} 23 24.cta span { 25 position: relative; 26 font-family: "Ubuntu", sans-serif; 27 font-size: 18px; 28 font-weight: 700; 29 letter-spacing: 0.05em; 30 color: #6a32db; 31} 32 33.cta svg { 34 position: relative; 35 top: 0; 36 margin-left: 10px; 37 fill: none; 38 stroke-linecap: round; 39 stroke-linejoin: round; 40 stroke: #6a32db; 41 stroke-width: 2; 42 transform: translateX(-5px); 43 transition: all 0.3s ease; 44} 45 46.cta:hover:before { 47 width: 100%; 48 background: #dfceff; 49} 50 51.cta:hover svg { 52 transform: translateX(0); 53} 54 55.cta:active { 56 transform: scale(0.95); 57} 58
61 views
Variation of abutton
61 views
Variation of abutton
Variations
1 MIT License