#e8e8e8
1.button { 2 width: 50px; 3 height: 50px; 4 border: none; 5 border-radius: 50%; 6 background-color: rgb(32, 32, 32); 7 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) inset; 8 display: flex; 9 align-items: center; 10 justify-content: center; 11 position: relative; 12 cursor: pointer; 13} 14 15.svgIcon { 16 z-index: 2; 17} 18 19.button::before { 20 width: 35px; 21 height: 22px; 22 background: linear-gradient(to bottom,rgba(255, 255, 255, 0.575), rgba(0, 0, 0, 0.103)); 23 position: absolute; 24 content: ""; 25 top: 3.6px; 26 border-radius: 50%; 27 z-index: 1; 28} 29 30.tooltip { 31 position: absolute; 32 top: -40px; 33 opacity: 0; 34 background-color: rgb(134, 134, 134); 35 color: white; 36 padding: 5px 10px; 37 border-radius: 5px; 38 display: flex; 39 align-items: center; 40 justify-content: center; 41 transition-duration: .5s; 42 pointer-events: none; 43 letter-spacing: 0.5px; 44} 45 46.button:hover .tooltip { 47 opacity: 1; 48 transition-duration: .5s; 49} 50 51.button:hover { 52 background-position: right; 53 transition-duration: 1s; 54}
773 views
773 views
Comments
MIT License