KODENYA ADALAH :
<html>
<head>
<style type="text/css">
body {background-color: #F0F0F0;overflow:hidden}
h3{font-size:20px;border-bottom-width:35px;border-color:solid}
h1 a {font-size:25px;display: inline-block;position: relative;padding: 5px 25px 5px 20px;color: #fff;margin:0 15px;text-shadow:1px 2px 1px #111;
background: linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-webkit-linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-moz-linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-o-linear-gradient(left, transparent 0%,red 70%,red 100%);}
h1 a:before, h1 a:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
h1 a:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
h1 a:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}
.tombol-share {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -moz-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -ms-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -o-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);
width: 100px;height: 100px;border-radius: 50%;display: inline-block;font-size: 75px;line-height: 100px;margin: 25px;
position: relative;text-align: center;-webkit-animation: jump 2s infinite;-moz-animation: jump 2s infinite;animation: jump 2s infinite}
.wrapper {width: 100px;height: 100px;display: inline-block;position: relative}
.tombol-share span {
display: block;width: 0;height: 0;border-radius: 0;position: absolute;left: 50%;top: 50%;margin: 0;
-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s}
.tombol-share:hover span {width: 100px;height: 100px;border-radius: 100%;margin: -50px}
.facebook span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%)}
.twitter span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%)}
.googlePlus span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%)}
.tombol-share i {background: none;width: 100px;height: 100px;position: absolute;left: 0;top: 0;line-height: 90px;font-size: 50px;z-index: 10}
.tombol-googlePlus:before {content: "\e600"}
.tombol-facebook:before {content: "\e601"}
.tombol-twitter:before {content: "\e602"}
.tombol-share .tombol-facebook {color: #3B5998;}
.tombol-share .tombol-twitter {color: #4099FF;}
.tombol-share .tombol-googlePlus {color: #DB5A3C;}
.tombol-share:hover i{color: white;}
.wrapper {positon: relative;display: inline-block;margin: 20px}
.shadow {
width: 46px;height: 10px;background: rgba(0,0,0,0.2);position: absolute;left: 50%;margin-top: -10px;border-radius: 50%;
-webkit-animation: shadow 2s infinite;-moz-animation: shadow 2s infinite;animation: shadow 2s infinite;}
@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@font-face {
font-family: 'icomoon';
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?#iefixblijkv') format('embedded-opentype'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.woff?blijkv') format('woff'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.ttf?blijkv') format('truetype'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.svg?blijkv#icomoon') format('svg');
font-weight: normal;
font-style: normal}
[class^="tombol-"], [class*=" tombol-"] {
font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;
line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
</style>
</head>
<body><div class="wrapper">
<a class="tombol-share facebook" href="">
<i class="tombol-facebook"></i><span></span></a>
<div class="shadow"></div></div>
<div class="wrapper"><a class="tombol-share twitter" href=""><i class="tombol-twitter"></i><span></span></a>
<div class="shadow"></div></div>
<div class="wrapper"><a class="tombol-share googlePlus" href=""><i class="tombol-googlePlus"></i><span></span></a>
<div class="shadow"></div></div>
<div style='clear: both;'></div>
</body>
</html>
<head>
<style type="text/css">
body {background-color: #F0F0F0;overflow:hidden}
h3{font-size:20px;border-bottom-width:35px;border-color:solid}
h1 a {font-size:25px;display: inline-block;position: relative;padding: 5px 25px 5px 20px;color: #fff;margin:0 15px;text-shadow:1px 2px 1px #111;
background: linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-webkit-linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-moz-linear-gradient(left, transparent 0%,red 70%,red 100%);
background:-o-linear-gradient(left, transparent 0%,red 70%,red 100%);}
h1 a:before, h1 a:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
h1 a:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
h1 a:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}
.tombol-share {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -moz-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -ms-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: -o-radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);background: radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);
width: 100px;height: 100px;border-radius: 50%;display: inline-block;font-size: 75px;line-height: 100px;margin: 25px;
position: relative;text-align: center;-webkit-animation: jump 2s infinite;-moz-animation: jump 2s infinite;animation: jump 2s infinite}
.wrapper {width: 100px;height: 100px;display: inline-block;position: relative}
.tombol-share span {
display: block;width: 0;height: 0;border-radius: 0;position: absolute;left: 50%;top: 50%;margin: 0;
-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s}
.tombol-share:hover span {width: 100px;height: 100px;border-radius: 100%;margin: -50px}
.facebook span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%, #3B5998 80%)}
.twitter span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%)}
.googlePlus span {
background: -webkit-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -moz-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -ms-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: -o-radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%)}
.tombol-share i {background: none;width: 100px;height: 100px;position: absolute;left: 0;top: 0;line-height: 90px;font-size: 50px;z-index: 10}
.tombol-googlePlus:before {content: "\e600"}
.tombol-facebook:before {content: "\e601"}
.tombol-twitter:before {content: "\e602"}
.tombol-share .tombol-facebook {color: #3B5998;}
.tombol-share .tombol-twitter {color: #4099FF;}
.tombol-share .tombol-googlePlus {color: #DB5A3C;}
.tombol-share:hover i{color: white;}
.wrapper {positon: relative;display: inline-block;margin: 20px}
.shadow {
width: 46px;height: 10px;background: rgba(0,0,0,0.2);position: absolute;left: 50%;margin-top: -10px;border-radius: 50%;
-webkit-animation: shadow 2s infinite;-moz-animation: shadow 2s infinite;animation: shadow 2s infinite;}
@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@font-face {
font-family: 'icomoon';
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?#iefixblijkv') format('embedded-opentype'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.woff?blijkv') format('woff'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.ttf?blijkv') format('truetype'),
url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.svg?blijkv#icomoon') format('svg');
font-weight: normal;
font-style: normal}
[class^="tombol-"], [class*=" tombol-"] {
font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;
line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
</style>
</head>
<body><div class="wrapper">
<a class="tombol-share facebook" href="">
<i class="tombol-facebook"></i><span></span></a>
<div class="shadow"></div></div>
<div class="wrapper"><a class="tombol-share twitter" href=""><i class="tombol-twitter"></i><span></span></a>
<div class="shadow"></div></div>
<div class="wrapper"><a class="tombol-share googlePlus" href=""><i class="tombol-googlePlus"></i><span></span></a>
<div class="shadow"></div></div>
<div style='clear: both;'></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar