26K views
CSSAdd prefixes
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}
HTML
1<button class="cta"> 2 <span>Hover me</span> 3 <svg viewBox="0 0 13 10" height="10px" width="15px"> 4 <path d="M1,5 L11,5"></path> 5 <polyline points="8 1 12 5 8 9"></polyline> 6 </svg> 7</button>