#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: #f09433; 13 background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 14 background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 15 background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 16 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); 17 overflow: hidden; 18} 19 20.svgIcon { 21 transition-duration: .3s; 22} 23 24.svgIcon path { 25 fill: white; 26} 27 28.text { 29 position: absolute; 30 color: rgb(255, 255, 255); 31 width: 120px; 32 font-weight: 600; 33 opacity: 0; 34 transition-duration: .4s; 35} 36 37.Btn:hover { 38 width: 110px; 39 transition-duration: .4s; 40 border-radius: 30px; 41} 42 43.Btn:hover .text { 44 opacity: 1; 45 transition-duration: .4s; 46} 47 48.Btn:hover .svgIcon { 49 opacity: 0; 50 transition-duration: .3s; 51}
1.1K views
1.1K views
Comments
Variations
1 MIT License