Button by vinodjangid07
#e8e8e8
1.Btn { 2 border: none; 3 border-radius: 50%; 4 width: 45px; 5 height: 45px; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 transition-duration: .4s; 10 cursor: pointer; 11 position: relative; 12 background-color: rgb(31, 31, 31); 13 overflow: hidden; 14} 15 16.svgIcon { 17 transition-duration: .3s; 18} 19 20.svgIcon path { 21 fill: white; 22} 23 24.text { 25 position: absolute; 26 color: rgb(255, 255, 255); 27 width: 120px; 28 font-weight: 600; 29 opacity: 0; 30 transition-duration: .4s; 31} 32 33.Btn:hover { 34 width: 110px; 35 transition-duration: .4s; 36 border-radius: 30px; 37} 38 39.Btn:hover .text { 40 opacity: 1; 41 transition-duration: .4s; 42} 43 44.Btn:hover .svgIcon { 45 opacity: 0; 46 transition-duration: .3s; 47}
1.2K views
Variation of abutton
MIT License