865 views
CSS
1.share { 2 display: flex; 3 flex-direction: row; 4 gap: 1em; 5 transition: .4s ease-in-out; 6 margin-top: 60px; 7} 8 9.btn1 { 10 position: relative; 11 width: 3em; 12 height: 3em; 13 outline: none; 14 border: none; 15 border-radius: 50%; 16 background-color: white; 17 transition: .4s all; 18} 19 20.btn1 .instagram { 21 margin-top: 0.1em; 22 fill: #cc39a4; 23} 24 25.btn1 .tooltiptext1 { 26 visibility: hidden; 27 width: 6em; 28 height: 8em; 29 background-color: whitesmoke; 30 color: black; 31 text-align: center; 32 border-radius: 10px; 33 padding: 1em; 34 position: absolute; 35 left: -1.5em; 36 top: -8em; 37 z-index: 1; 38 transition: .1s ease-in-out; 39} 40 41.btn1 .tooltiptext1 .card { 42 width: 4em; 43 height: 4em; 44 background-color: white; 45} 46 47.btn1 .tooltiptext1 .account { 48 margin-top: 1em; 49} 50 51.btn1 .tooltiptext1 .username { 52 font-size: 0.7em; 53 margin-top: 1.6em; 54 font-weight: bold; 55} 56 57.btn1:hover .tooltiptext1 { 58 transform: translateY(-1em); 59 visibility: visible; 60} 61 62.btn1:hover { 63 background-color: #cc39a4; 64} 65 66.btn1:hover .instagram { 67 fill: white; 68} 69 70.btn2 { 71 position: relative; 72 width: 3em; 73 height: 3em; 74 outline: none; 75 border: none; 76 border-radius: 50%; 77 background-color: white; 78 transition: .4s all; 79} 80 81.btn2 .twitter { 82 margin-top: .25em; 83 margin-left: .1em; 84 fill: #03A9F4; 85} 86 87.btn2 .tooltiptext2 { 88 visibility: hidden; 89 width: 6em; 90 height: 8em; 91 background-color: whitesmoke; 92 color: black; 93 text-align: center; 94 border-radius: 10px; 95 padding: 1em; 96 position: absolute; 97 left: -1.5em; 98 top: -8em; 99 z-index: 1; 100 transition: .1s ease-in-out; 101} 102 103.btn2 .tooltiptext2 .card { 104 width: 4em; 105 height: 4em; 106 background-color: white; 107} 108 109.btn2 .tooltiptext2 .account { 110 margin-top: 1em; 111} 112 113.btn2 .tooltiptext2 .username { 114 font-size: 0.6em; 115 margin-top: 1.6em; 116 font-weight: bold; 117} 118 119.btn2:hover .tooltiptext2 { 120 transform: translateY(-1em); 121 visibility: visible; 122} 123 124.btn2:hover { 125 background-color: #03A9F4; 126} 127 128.btn2:hover .twitter { 129 fill: white; 130} 131 132.btn3 { 133 position: relative; 134 width: 3em; 135 height: 3em; 136 outline: none; 137 border: none; 138 border-radius: 50%; 139 background-color: white; 140 transition: .4s all; 141} 142 143.btn3 .tooltiptext3 { 144 visibility: hidden; 145 width: 6em; 146 height: 8em; 147 background-color: whitesmoke; 148 color: black; 149 text-align: center; 150 border-radius: 10px; 151 padding: 1em; 152 position: absolute; 153 left: -1.5em; 154 top: -8em; 155 z-index: 1; 156 transition: .1s ease-in-out; 157} 158 159.btn3 .tooltiptext3 .card { 160 width: 4em; 161 height: 4em; 162 background-color: white; 163} 164 165.btn3 .tooltiptext3 .account { 166 margin-top: 1em; 167} 168 169.btn3 .tooltiptext3 .username { 170 font-size: 0.7em; 171 margin-top: 1.6em; 172 font-weight: bold; 173} 174 175.btn3:hover .tooltiptext3 { 176 transform: translateY(-1em); 177 visibility: visible; 178} 179 180.btn3:hover { 181 background-color: black; 182} 183 184.btn3:hover .git { 185 fill: white; 186}
HTML
1<div class="share"> 2 <button class="btn1"> 3 <svg fill-rule="nonzero" height="30px" width="30px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="instagram"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero"><g transform="scale(8,8)"><path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path></g></g></svg> 4 <span class="tooltiptext1"> 5 <div class="card"> 6 <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg> 7 </div> 8 <div class="username">@meoninsta</div> 9 </span> 10 </button> 11 <button class="btn2"> 12 <svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="twitter"><path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path></svg> 13 <span class="tooltiptext2"> 14 <div class="card"> 15 <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg> 16 </div> 17 <div class="username">@meontwitter</div> 18 </span> 19 </button> 20 <button class="btn3"> 21 <svg height="30px" width="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="git"> <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg> 22 <span class="tooltiptext3"> 23 <div class="card"> 24 <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg> 25 </div> 26 <div class="username">@meongit</div> 27 </span> 28 </button> 29</div>