#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} 9 10.cta:before { 11 content: ""; 12 position: absolute; 13 top: 0; 14 left: 0; 15 display: block; 16 border-radius: 50px; 17 background: #b1dae7; 18 width: 45px; 19 height: 45px; 20 transition: all 0.3s ease; 21} 22 23.cta span { 24 position: relative; 25 font-family: "Ubuntu", sans-serif; 26 font-size: 18px; 27 font-weight: 700; 28 letter-spacing: 0.05em; 29 color: #234567; 30} 31 32.cta svg { 33 position: relative; 34 top: 0; 35 margin-left: 10px; 36 fill: none; 37 stroke-linecap: round; 38 stroke-linejoin: round; 39 stroke: #234567; 40 stroke-width: 2; 41 transform: translateX(-5px); 42 transition: all 0.3s ease; 43} 44 45.cta:hover:before { 46 width: 100%; 47 background: #b1dae7; 48} 49 50.cta:hover svg { 51 transform: translateX(0); 52} 53 54.cta:active { 55 transform: scale(0.95); 56}
39K views
39K views
Comments
MIT License