Button by wizard503
#e8e8e8
1.share { 2 width: 150px; 3 height: 150px; 4 margin: 5em auto; 5 background: rgba(10, 237, 189, 1); 6 background: -webkit-radial-gradient( 7 top left, 8 rgba(10, 237, 189, 1), 9 rgba(37, 211, 103, 1) 10 ); 11 background: -moz-radial-gradient( 12 top left, 13 rgba(10, 237, 189, 1), 14 rgba(37, 211, 103, 1) 15 ); 16 background: radial-gradient( 17 to bottom right, 18 rgba(10, 237, 189, 1), 19 rgba(37, 211, 103, 1) 20 ); 21 text-align: center; 22 border-radius: 100%; 23 overflow: hidden; 24 position: relative; 25 box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); 26} 27 28.share a { 29 display: -webkit-inline-box; 30 display: -ms-inline-flexbox; 31 display: inline-flex; 32 width: 90px; 33 height: 90px; 34 position: relative; 35 z-index: 1; 36} 37 38.share::after { 39 content: "Share"; 40 position: absolute; 41 left: 0; 42 right: 0; 43 top: 40%; 44 font-size: 25px; 45 font-weight: bold; 46 font-style: italic; 47 text-transform: uppercase; 48 color: #fff; 49} 50 51.share:hover::after { 52 color: transparent; 53} 54 55.share:hover { 56 background: rgba(242, 41, 92, 1); 57 background: -webkit-radial-gradient( 58 top left, 59 rgba(242, 41, 92, 1), 60 rgba(41, 172, 225, 1) 61 ); 62 background: -moz-radial-gradient( 63 top left, 64 rgba(242, 41, 92, 1), 65 rgba(41, 172, 225, 1) 66 ); 67 background: radial-gradient( 68 to bottom right, 69 rgba(242, 41, 92, 1), 70 rgba(41, 172, 225, 1) 71 ); 72} 73 74.share a.fb { 75 background: #1266f1; 76 top: -5.65em; 77 left: -2.83em; 78 -webkit-transition: all 0.3s ease-in-out; 79 transition: all 0.3s ease-in-out; 80} 81 82.share a.tw { 83 background: #28abe1; 84 top: -6.55em; 85 right: -9.39em; 86 -webkit-transition: all 0.3s ease-in-out; 87 transition: all 0.3s ease-in-out; 88} 89 90.share a.ins { 91 background: #f2295b; 92 bottom: 6.7em; 93 left: -7.5em; 94 -webkit-tra3nsition: all 0.3s ease-in-out; 95 transition: all 0.3s ease-in-out; 96} 97 98.share a.wh { 99 background: #25d366; 100 right: -2.81em; 101 bottom: 7.5em; 102 -webkit-transition: all 0.3s ease-in-out; 103 transition: all 0.3s ease-in-out; 104} 105 106.share:hover a.fb { 107 top: -0.96em; 108} 109 110.share:hover a.tw { 111 right: -2.8em; 112} 113 114.share:hover a.ins { 115 left: -2.84em; 116} 117 118.share:hover a.wh { 119 bottom: 12.3em; 120} 121 122.facebook { 123 padding-top: 45%; 124} 125 126.instagram { 127 padding-left: 30%; 128 padding-top: 15%; 129} 130 131.whatsapp { 132 padding-left: 15%; 133 padding-top: 15%; 134} 135 136.twitter { 137 padding-top: 25%; 138 padding-left: 10%; 139} 140 141.fb:hover { 142 box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5) inset; 143} 144 145.tw:hover { 146 box-shadow: 10px 5px 30px 2px rgba(0, 0, 0, 0.5) inset; 147} 148 149.ins:hover { 150 box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5) inset; 151} 152 153.wh:hover { 154 box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.5) inset; 155} 156
1.6K views
1.6K views
MIT License