Kode yang digunakan untuk membuat tombol seperti di atas adalah :
Print this page
<html>
<head>
<style type="text/css">
body {background: #999;color:#00FF7F;height:100%;overflow:hidden;}
#tab-menu {
width: 550px;
display: block;
position: relative;
top:-80px;}
.open-menu /*!id='sb77'*/ {display: none;}
.open-menu:checked ~ .g-plus {top: 110px;}
.open-menu:checked ~ .fb {left: 295px;top:155px;}
.open-menu:checked ~ .twitter {left: 130px;top:155px;}
.show-menu {
font: bold italic large Georgia;
background: #DC143C;
width: 105px;
height: 105px;
display: block;
cursor: pointer;
border-radius: 50%;
position: absolute;
color:#fff;
text-align:center;
line-height:105px;
z-index: 10;
top:200px;
left:200px;
box-shadow:inset 0px 0px 2px 10px #F0F8FF;
text-shadow: 1px 2px 2px #111}
.text /*!id='sb77'*/ {
width: 80px;
height: 80px;
display: block;
border-radius: 50%;
position: absolute;
top: 215px;
left: 215px;
background: #ecf0f1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.g-plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif09c5ZBvm65P_2bEX75KRQxgsgoMjNjphAM10gM7c_UWNavo86EquVEWWv3jp5Vneq1aIwfOsdOlSonHaE340NqnHGH9H3BUpEqa2C9mwwkI-mNGPegDZpsZTzTkCwuufYRQrr0702E8/s80/sb77-googleplus.png) no-repeat center center;}
.fb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNKitHAMR3LsZo3txDWSYjs3b_xDA-ZL6Q-yfZ6bNBBu7xmhcKbre4SCplRoCwA9YiPEHKkw_4b5Yd-NK-etUXqgyed3Vt7yG7tDLGQZlxoLCo-CVszeTlwOv2lSkCYoac_b238TmbZw/s80/sb77-facebook.png) no-repeat center center;}
.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dlWYz0o-lXLq7bkCT3BGTJhBbhSBjW4QfqOUl9o3Ji_kzu6xi4tFZxGzrrTxd5B3JlgBKns_hrUX8O4Rxh526-ANPJ1ecm9JASmk2eHzVOrLCX8JA4BogTji12hlAYoIOCffyKjlAes/s80/sb77-twitter.png) no-repeat center center;}
</style><br />
<body>
<div id="tab-menu"><input type="checkbox" id="sb77_id" class="open-menu"><br />
<label for="sb77_id" class="show-menu">SHARE</label><br />
<a href="#" class="g-plus text"></a><br />
<a href="#" class="fb text"></a><br />
<a href="#" class="twitter text"></a><br />
</input><br />
</div>
<div style='clear: both;'></div>
</body>
</html>
<head>
<style type="text/css">
body {background: #999;color:#00FF7F;height:100%;overflow:hidden;}
#tab-menu {
width: 550px;
display: block;
position: relative;
top:-80px;}
.open-menu /*!id='sb77'*/ {display: none;}
.open-menu:checked ~ .g-plus {top: 110px;}
.open-menu:checked ~ .fb {left: 295px;top:155px;}
.open-menu:checked ~ .twitter {left: 130px;top:155px;}
.show-menu {
font: bold italic large Georgia;
background: #DC143C;
width: 105px;
height: 105px;
display: block;
cursor: pointer;
border-radius: 50%;
position: absolute;
color:#fff;
text-align:center;
line-height:105px;
z-index: 10;
top:200px;
left:200px;
box-shadow:inset 0px 0px 2px 10px #F0F8FF;
text-shadow: 1px 2px 2px #111}
.text /*!id='sb77'*/ {
width: 80px;
height: 80px;
display: block;
border-radius: 50%;
position: absolute;
top: 215px;
left: 215px;
background: #ecf0f1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.g-plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif09c5ZBvm65P_2bEX75KRQxgsgoMjNjphAM10gM7c_UWNavo86EquVEWWv3jp5Vneq1aIwfOsdOlSonHaE340NqnHGH9H3BUpEqa2C9mwwkI-mNGPegDZpsZTzTkCwuufYRQrr0702E8/s80/sb77-googleplus.png) no-repeat center center;}
.fb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNKitHAMR3LsZo3txDWSYjs3b_xDA-ZL6Q-yfZ6bNBBu7xmhcKbre4SCplRoCwA9YiPEHKkw_4b5Yd-NK-etUXqgyed3Vt7yG7tDLGQZlxoLCo-CVszeTlwOv2lSkCYoac_b238TmbZw/s80/sb77-facebook.png) no-repeat center center;}
.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dlWYz0o-lXLq7bkCT3BGTJhBbhSBjW4QfqOUl9o3Ji_kzu6xi4tFZxGzrrTxd5B3JlgBKns_hrUX8O4Rxh526-ANPJ1ecm9JASmk2eHzVOrLCX8JA4BogTji12hlAYoIOCffyKjlAes/s80/sb77-twitter.png) no-repeat center center;}
</style><br />
<body>
<div id="tab-menu"><input type="checkbox" id="sb77_id" class="open-menu"><br />
<label for="sb77_id" class="show-menu">SHARE</label><br />
<a href="#" class="g-plus text"></a><br />
<a href="#" class="fb text"></a><br />
<a href="#" class="twitter text"></a><br />
</input><br />
</div>
<div style='clear: both;'></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar