#e8e8e8
1button { 2 position: relative; 3 overflow: hidden; 4 outline: none; 5 cursor: pointer; 6 border-radius: 50px; 7 background-color: hsl(255deg 50% 40%); 8 border: solid 4px hsl(50deg 100% 50%); 9 font-family: inherit; 10} 11 12.default-btn,.hover-btn { 13 background-color: hsl(255deg 50% 40%); 14 display: -webkit-box; 15 display: -moz-box; 16 display: -ms-flexbox; 17 display: -webkit-flex; 18 display: flex; 19 align-items: center; 20 gap: 15px; 21 padding: 15px 20px; 22 border-radius: 50px; 23 font-size: 17px; 24 font-weight: 500; 25 text-transform: uppercase; 26 transition: all .3s ease; 27} 28 29.hover-btn { 30 position: absolute; 31 inset: 0; 32 background-color: hsl(255deg 50% 49%); 33 transform: translate(0%,100%); 34} 35 36.default-btn span { 37 color: hsl(0, 0%, 100%); 38} 39 40.hover-btn span { 41 color: hsl(50deg 100% 50%); 42} 43 44button:hover .default-btn { 45 transform: translate(0%,-100%); 46} 47 48button:hover .hover-btn { 49 transform: translate(0%,0%); 50}
7.8K views
7.8K views
Comments
MIT License