Button by JaydipPrajapati1910
#e8e8e8
1.wrapper { 2 display: inline-flex; 3 list-style: none; 4 height: 120px; 5 width: 100%; 6 padding-top: 40px; 7 font-family: "Poppins", sans-serif; 8 justify-content: center; 9} 10 11.wrapper .icon { 12 position: relative; 13 background: #fff; 14 border-radius: 50%; 15 margin: 10px; 16 width: 50px; 17 height: 50px; 18 font-size: 18px; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22 flex-direction: column; 23 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 24 cursor: pointer; 25 transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 26} 27 28.wrapper .tooltip { 29 position: absolute; 30 top: 0; 31 font-size: 14px; 32 background: #fff; 33 color: #fff; 34 padding: 5px 8px; 35 border-radius: 5px; 36 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 37 opacity: 0; 38 pointer-events: none; 39 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 40} 41 42.wrapper .tooltip::before { 43 position: absolute; 44 content: ""; 45 height: 8px; 46 width: 8px; 47 background: #fff; 48 bottom: -3px; 49 left: 50%; 50 transform: translate(-50%) rotate(45deg); 51 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 52} 53 54.wrapper .icon:hover .tooltip { 55 top: -45px; 56 opacity: 1; 57 visibility: visible; 58 pointer-events: auto; 59} 60 61.wrapper .icon:hover span, 62.wrapper .icon:hover .tooltip { 63 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 64} 65 66.wrapper svg { 67 fill: green; 68} 69 70.wrapper span:hover, 71.wrapper svg:hover, 72.wrapper .black:hover, 73.wrapper .black:hover .tooltip, 74.wrapper .black:hover .tooltip::before { 75 background: #222; 76 color: white; 77 fill: white; 78} 79 80
1.2K views
1.2K views
MIT License