#212121
1.CartBtn { 2 width: 140px; 3 height: 40px; 4 border-radius: 12px; 5 border: none; 6 background-color: rgb(255, 208, 0); 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 cursor: pointer; 11 transition-duration: .5s; 12 overflow: hidden; 13 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103); 14 position: relative; 15} 16 17.IconContainer { 18 position: absolute; 19 left: -50px; 20 width: 30px; 21 height: 30px; 22 background-color: transparent; 23 border-radius: 50%; 24 display: flex; 25 align-items: center; 26 justify-content: center; 27 overflow: hidden; 28 z-index: 2; 29 transition-duration: .5s; 30} 31 32.icon { 33 border-radius: 1px; 34} 35 36.text { 37 height: 100%; 38 width: fit-content; 39 display: flex; 40 align-items: center; 41 justify-content: center; 42 color: rgb(17, 17, 17); 43 z-index: 1; 44 transition-duration: .5s; 45 font-size: 1.04em; 46 font-weight: 600; 47} 48 49.CartBtn:hover .IconContainer { 50 transform: translateX(58px); 51 border-radius: 40px; 52 transition-duration: .5s; 53} 54 55.CartBtn:hover .text { 56 transform: translate(10px,0px); 57 transition-duration: .5s; 58} 59 60.CartBtn:active { 61 transform: scale(0.95); 62 transition-duration: .5s; 63}
1.8K views
1.8K views
Comments
MIT License