#212121
1.Btn { 2 width: 50px; 3 height: 50px; 4 border: none; 5 border-radius: 50%; 6 background-color: rgb(27, 27, 27); 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 justify-content: center; 11 cursor: pointer; 12 position: relative; 13 transition-duration: .3s; 14 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11); 15} 16 17.svgIcon { 18 fill: rgb(214, 178, 255); 19} 20 21.icon2 { 22 width: 18px; 23 height: 5px; 24 border-bottom: 2px solid rgb(182, 143, 255); 25 border-left: 2px solid rgb(182, 143, 255); 26 border-right: 2px solid rgb(182, 143, 255); 27} 28 29.tooltip { 30 position: absolute; 31 right: -105px; 32 opacity: 0; 33 background-color: rgb(12, 12, 12); 34 color: white; 35 padding: 5px 10px; 36 border-radius: 5px; 37 display: flex; 38 align-items: center; 39 justify-content: center; 40 transition-duration: .2s; 41 pointer-events: none; 42 letter-spacing: 0.5px; 43} 44 45.tooltip::before { 46 position: absolute; 47 content: ""; 48 width: 10px; 49 height: 10px; 50 background-color: rgb(12, 12, 12); 51 background-size: 1000%; 52 background-position: center; 53 transform: rotate(45deg); 54 left: -5%; 55 transition-duration: .3s; 56} 57 58.Btn:hover .tooltip { 59 opacity: 1; 60 transition-duration: .3s; 61} 62 63.Btn:hover { 64 background-color: rgb(150, 94, 255); 65 transition-duration: .3s; 66} 67 68.Btn:hover .icon2 { 69 border-bottom: 2px solid rgb(235, 235, 235); 70 border-left: 2px solid rgb(235, 235, 235); 71 border-right: 2px solid rgb(235, 235, 235); 72} 73 74.Btn:hover .svgIcon { 75 fill: rgb(255, 255, 255); 76 animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 77} 78 79@keyframes slide-in-top { 80 0% { 81 transform: translateY(-10px); 82 opacity: 0; 83 } 84 85 100% { 86 transform: translateY(0px); 87 opacity: 1; 88 } 89} 90
4K views
4K views
Comments
MIT License