Kode yang digunakan adalah :
<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Merriweather|Inconsolata);
@import url("http://fonts.googleapis.com/css?family=Oleo+Script");
body{background:linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-webkit-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-moz-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-ms-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-o-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);font-family:'Raleway',sans-serif;color:#ccc}
h1 {font:bold 40px 'Oleo Script';text-shadow:white 2px 3px 0;text-align:center;padding-bottom:15px}
h3 {font-family:"Open Sans", Sans-serif;text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:0.1em; text-align:center;color:#7FFF00;text-shadow:2px 2px 3px #111}
h3:before,h3:after {content:" ";position:absolute;width:100px;height:4px;border-top:2px solid #7FFF00;border-bottom:2px solid #7FFF00}
h3:before {margin:7px 0 0 -110px}
h3:after {margin:7px 0 0 10px}
.btn5,.btn12,.btn7 {font:bold 1.2em/65px 'Merriweather',serif;letter-spacing:1px;color:#222}
.wrapper {width:80%;margin:-50px auto;text-align:center}
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn5 {background:#6495ED;-webkit-transition:all 0.25s;-moz-transition:all 0.25s;-ms-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;box-shadow:1px 1px 2px #000}
.btn5:hover {-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}
.btn7 {top:0;left:0;position:relative;border-radius:7px;background: red;color:#fff;text-shadow:1px 2px 2px #111;box-shadow:5px 5px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc;transition:top 0.25s, left 0.25s, box-shadow 0.25s;-webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}
.btn7:hover {box-shadow:none;top:5px;left:5px}
.btn12 {background:white;position:relative}
.btn12:hover {background:blue}
.btn12:hover:after {height:95px;width:390px;top:-12px;left:-12px}
.btn12:after {content:"";height:0;width:0;position:absolute;top:50%;left:50%;border:2px solid white;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:-10}
</style><br /><br /><br /><br /><br /><br /><br />
<body>
<div class="wrapper">
<div class="button btn5"> Contoh 1 | Zooming<br />
</div><br />
<div class="button btn12"> Contoh 2 | Bergaris<br />
</div><br/>
<div class="button btn7"> Contoh 3 |3D Hover<br />
</div>
</div>
<div style='clear: both;'></div>
</body>
</html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Merriweather|Inconsolata);
@import url("http://fonts.googleapis.com/css?family=Oleo+Script");
body{background:linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-webkit-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-moz-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-ms-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);background:-o-linear-gradient(right, #111 98%, #DC143C 2%, #9ACD32);font-family:'Raleway',sans-serif;color:#ccc}
h1 {font:bold 40px 'Oleo Script';text-shadow:white 2px 3px 0;text-align:center;padding-bottom:15px}
h3 {font-family:"Open Sans", Sans-serif;text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:0.1em; text-align:center;color:#7FFF00;text-shadow:2px 2px 3px #111}
h3:before,h3:after {content:" ";position:absolute;width:100px;height:4px;border-top:2px solid #7FFF00;border-bottom:2px solid #7FFF00}
h3:before {margin:7px 0 0 -110px}
h3:after {margin:7px 0 0 10px}
.btn5,.btn12,.btn7 {font:bold 1.2em/65px 'Merriweather',serif;letter-spacing:1px;color:#222}
.wrapper {width:80%;margin:-50px auto;text-align:center}
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn5 {background:#6495ED;-webkit-transition:all 0.25s;-moz-transition:all 0.25s;-ms-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;box-shadow:1px 1px 2px #000}
.btn5:hover {-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}
.btn7 {top:0;left:0;position:relative;border-radius:7px;background: red;color:#fff;text-shadow:1px 2px 2px #111;box-shadow:5px 5px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc;transition:top 0.25s, left 0.25s, box-shadow 0.25s;-webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}
.btn7:hover {box-shadow:none;top:5px;left:5px}
.btn12 {background:white;position:relative}
.btn12:hover {background:blue}
.btn12:hover:after {height:95px;width:390px;top:-12px;left:-12px}
.btn12:after {content:"";height:0;width:0;position:absolute;top:50%;left:50%;border:2px solid white;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:-10}
</style><br /><br /><br /><br /><br /><br /><br />
<body>
<div class="wrapper">
<div class="button btn5"> Contoh 1 | Zooming<br />
</div><br />
<div class="button btn12"> Contoh 2 | Bergaris<br />
</div><br/>
<div class="button btn7"> Contoh 3 |3D Hover<br />
</div>
</div>
<div style='clear: both;'></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar