Button by eslam-hany
#e8e8e8
1.button-container { 2 display: flex; 3 background-color: rgba(0, 73, 144); 4 width: 250px; 5 height: 40px; 6 align-items: center; 7 justify-content: space-around; 8 border-radius: 10px; 9 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px, 10 rgba(0, 73, 144, 0.5) 5px 10px 15px; 11 transition: all 0.5s; 12} 13.button-container:hover { 14 width: 300px; 15 transition: all 0.5s; 16} 17 18.button { 19 outline: 0 !important; 20 border: 0 !important; 21 width: 40px; 22 height: 40px; 23 border-radius: 50%; 24 background-color: transparent; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 color: #fff; 29 transition: all ease-in-out 0.3s; 30 cursor: pointer; 31} 32 33.button:hover { 34 transform: translateY(-3px); 35} 36 37.icon { 38 font-size: 20px; 39} 40
1.3K views
Variation of abutton
MIT License