#e8e8e8
1.button { 2 position: relative; 3 width: 150px; 4 height: 40px; 5 cursor: pointer; 6 display: flex; 7 align-items: center; 8 border: 1px solid #cc0000; 9 background-color: #e50000; 10 overflow: hidden; 11} 12 13.button, .button__icon, .button__text { 14 transition: all 0.3s; 15} 16 17.button .button__text { 18 transform: translateX(35px); 19 color: #fff; 20 font-weight: 600; 21} 22 23.button .button__icon { 24 position: absolute; 25 transform: translateX(109px); 26 height: 100%; 27 width: 39px; 28 background-color: #cc0000; 29 display: flex; 30 align-items: center; 31 justify-content: center; 32} 33 34.button .svg { 35 width: 20px; 36} 37 38.button:hover { 39 background: #cc0000; 40} 41 42.button:hover .button__text { 43 color: transparent; 44} 45 46.button:hover .button__icon { 47 width: 148px; 48 transform: translateX(0); 49} 50 51.button:active .button__icon { 52 background-color: #b20000; 53} 54 55.button:active { 56 border: 1px solid #b20000; 57}
Comments
Variations
2andrew-demchenk0
306 views
MIT License