#e8e8e8
1.Btn { 2 display: flex; 3 align-items: center; 4 justify-content: flex-start; 5 width: 45px; 6 height: 45px; 7 border: none; 8 border-radius: 0px; 9 cursor: pointer; 10 position: relative; 11 overflow: hidden; 12 transition-duration: .3s; 13 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199); 14 background-color: black; 15} 16 17/* plus sign */ 18.sign { 19 width: 100%; 20 font-size: 2em; 21 color: white; 22 transition-duration: .3s; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26} 27/* text */ 28.text { 29 position: absolute; 30 right: 0%; 31 width: 0%; 32 opacity: 0; 33 color: white; 34 font-size: 1.2em; 35 font-weight: 500; 36 transition-duration: .3s; 37} 38/* hover effect on button width */ 39.Btn:hover { 40 width: 125px; 41 border-radius: 0px; 42 transition-duration: .3s; 43} 44 45.Btn:hover .sign { 46 width: 30%; 47 transition-duration: .3s; 48 padding-left: 20px; 49} 50/* hover effect button's text */ 51.Btn:hover .text { 52 opacity: 1; 53 width: 70%; 54 transition-duration: .3s; 55 padding-right: 20px; 56} 57/* button click effect*/ 58.Btn:active { 59 transform: translate(2px ,2px); 60}
1.3K views
1.3K views
Comments
Variations
1 MIT License