#e8e8e8
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}
3.1K views
3.1K views
Comments
MIT License