Button by 0x-Sarthak
#212121
1.cta { 2 position: relative; 3 margin: auto; 4 padding: 11.5px 18px; 5 transition: all 0.2s ease; 6 border: 3px solid #552da8; 7 border-radius: 50px; 8 background: #552da8; 9 cursor: pointer; 10} 11 12.cta:before { 13 content: ""; 14 position: absolute; 15 top: 0; 16 right: 0; 17 display: block; 18 border-radius: 50px; 19 background: white; 20 width: 45px; 21 height: 45px; 22 transition: all 0.8s ease; 23} 24 25.cta span { 26 position: relative; 27 font-family: Montserrat; 28 font-size: 18px; 29 color: white; 30 font-weight: 400; 31 letter-spacing: 0.05em; 32} 33 34.cta svg { 35 position: relative; 36 top: 0; 37 margin-left: 10px; 38 fill: none; 39 stroke-linecap: round; 40 stroke-linejoin: round; 41 stroke: white; 42 stroke-width: 2; 43 transform: translateX(-5px); 44 transition: all 0.5s ease; 45} 46 47.cta:hover:before { 48 width: 100%; 49 background: #1c1c1c; 50} 51 52.cta:hover svg { 53 transform: translateX(0); 54 transition: all 2s ease; 55} 56 57.cta:active { 58 transform: scale(0.95); 59 transition: all 2s ease; 60} 61
235 views
235 views
MIT License