#212121
1.Btn { 2 width: 45px; 3 height: 45px; 4 background: linear-gradient(#44ea76, #39fad7); 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 border-radius: 50%; 9 cursor: pointer; 10 position: relative; 11 border: none; 12} 13 14.arrow path { 15 fill: white; 16} 17 18.text { 19 font-size: 0.7em; 20 width: 100px; 21 position: absolute; 22 color: white; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26 bottom: -18px; 27 opacity: 0; 28 transition-duration: .7s; 29} 30 31.Btn:hover .text { 32 opacity: 1; 33 transition-duration: .7s; 34} 35 36.Btn:hover .arrow { 37 animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 38} 39 40@keyframes slide-in-bottom { 41 0% { 42 transform: translateY(10px); 43 opacity: 0; 44 } 45 46 100% { 47 transform: translateY(0); 48 opacity: 1; 49 } 50} 51
1.8K views
1.8K views
Comments
MIT License