#e8e8e8
1.cta { 2 display: flex; 3 padding: 11px 33px; 4 text-decoration: none; 5 font-family: 'Poppins', sans-serif; 6 font-size: 25px; 7 color: white; 8 background: #6225E6; 9 transition: 1s; 10 box-shadow: 6px 6px 0 black; 11 transform: skewX(-15deg); 12 border: none; 13} 14 15.cta:focus { 16 outline: none; 17} 18 19.cta:hover { 20 transition: 0.5s; 21 box-shadow: 10px 10px 0 #FBC638; 22} 23 24.cta .second { 25 transition: 0.5s; 26 margin-right: 0px; 27} 28 29.cta:hover .second { 30 transition: 0.5s; 31 margin-right: 45px; 32} 33 34.span { 35 transform: skewX(15deg) 36} 37 38.second { 39 width: 20px; 40 margin-left: 30px; 41 position: relative; 42 top: 12%; 43} 44 45.one { 46 transition: 0.4s; 47 transform: translateX(-60%); 48} 49 50.two { 51 transition: 0.5s; 52 transform: translateX(-30%); 53} 54 55.cta:hover .three { 56 animation: color_anim 1s infinite 0.2s; 57} 58 59.cta:hover .one { 60 transform: translateX(0%); 61 animation: color_anim 1s infinite 0.6s; 62} 63 64.cta:hover .two { 65 transform: translateX(0%); 66 animation: color_anim 1s infinite 0.4s; 67} 68 69@keyframes color_anim { 70 0% { 71 fill: white; 72 } 73 74 50% { 75 fill: #FBC638; 76 } 77 78 100% { 79 fill: white; 80 } 81}
8.5K views
8.5K views
Comments
MIT License