01/27/16 | Mys2010 on Codepen

HomeArchives for 01/27/16

Button Share CSS3

Memasang kode Button Share CSS3
Kode ini menampilkan Tombol Link Hover. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
* {
font-smoothing: antialiased;
}
body {
background: #faa;
}
.wrapper {
max-width: 960px;
margin: 65px auto 0;
background-color: #000;
}
.listc {
position: relative;
width: 570px;
margin: auto;
}
ul {
list-style: none;
float: left;
}
ul li {
position: relative;
width: 100px; height: 100px;
float: left;
background: #474644;
border-radius: 15px;
border-bottom: 5px solid #33322f;
border-left: 3px solid #000000;
box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
-webkit-transition: -webkit-box-shadow .15s ease-in-out;
}
ul li a {
position: absolute;
width: 50px; height: 50px;
display: block;
color: #fff;
text-align: center;
line-height: 50px;
text-decoration: none;
top: 31%;
left: 25%;
}
ul li i{
text-shadow:
    0px 0px #504F4E,
    0px 1px #424241,
    -1px 2px #353534,
    -2px 3px #282827,
    0px 6px 5px rgba(51, 50, 47, 0.8);
color: #858482;
}

/* Colors */
.facebook:hover i{
text-shadow:
    0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3f5598;
color: #3f5598;
}
.twitter:hover i{
text-shadow:
    0px 0px #34AEDF, 0px 1px #2E9AC6, -1px 2px #2987AE, -2px 3px #237495, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3ac1f8;
color: #3ac1f8;
}
.youtube:hover i{
text-shadow:
    0px 0px #C42829, 0px 1px #AE2425, -1px 2px #991F20, -2px 3px #831B1C, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #da2d2e;
color: #da2d2e;
}
.instagram:hover i{
text-shadow:
    0px 0px #5C228E, 0px 1px #521E7E, -1px 2px #471B6F, -2px 3px #3D175F, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #66269e;
color: #66269e;
}
.linkedin:hover i{
text-shadow:
    0px 0px #195CAF, 0px 1px #16529B, -1px 2px #144788, -2px 3px #113D74, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #1c66c2;
color: #1c66c2;
}
ul li:hover i{
-webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
border-bottom: 1px solid #33322f;
top: 5px;
border-left: 1px solid #000000;
margin-right: 2px;
box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
z-index: -1; }
</style>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
<div class="listc">
    <ul>
      <li class="facebook"><a href="http://#"><i class="fa fa-facebook fa-2x"></i></a></li>
      <li class="twitter"><a href="http://#"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li class="youtube"><a href="http://#"><i class="fa fa-youtube fa-2x"></i></a></li>
      <li class="pinterest"> <a href="http://#"><i class="fa fa-pinterest fa-2x"></i></a></li>
      <li class="google-plus"><a href="http://#"><i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
</div>
</div>

Penjelasan :
Jika ingin menambahkan code teks animasi, copy code berikut :

<style class="cp-pen-styles">html {
width:100%;
height:100%;
min-width:440px;
}
body {
margin:0;
opacity:0;
color:#3584B2;
text-align:center;
text-shadow:0 1px 1px #FFF;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
background-image:-webkit-radial-gradient(50% 10%, cover, #dad, #eee);
background-image:-moz-radial-gradient(50% 10%, cover, #eee, #dad);
background-image:-ms-radial-gradient(50% 10%, cover, #dad, #eee);
background-image:-o-radial-gradient(50% 10%, cover, #eee, #dad);
background-image:radial-gradient(50% 10%, cover, #eee, #dad);
-webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
     -ms-transition:opacity 0.3s ease;
      -o-transition:opacity 0.3s ease;
         transition:opacity 0.3s ease;
}
header {
height:80px;
}
h1 {
font-size:46px;
margin:10px 0 0 0;
font-weight:normal;
}
h2 {
font-size:24px;
margin:28px 0 0 0;
font-weight:normal;
}
p {
width:320px;
margin:0 auto;
font-size:13px;
}
i {
display:block;
margin:0 0 20px 0;
}
nav a {
color:#FFF;
width:120px;
font-size:14px;
cursor:pointer;
overflow:hidden;
border-radius:3px;
position:relative;
background:#40A1DD;
display:inline-block;
padding:10px 0 10px 0;
margin:10px 10px 30px 10px;
border:1px solid rgba(255,255,255,.30);
text-shadow:1px 1px 2px rgba(0,0,0,.50);
font-family:Verdana, Geneva, sans-serif;
box-shadow:0 0 0 1px #008ADB, 0 2px 0 1px #008ADB, 0 3px 6px #000;
}
nav a:active {
top:3px;
box-shadow:0 0 0 1px #008ADB, 0 0 0 1px #008ADB, 0 0 4px #000;
}
nav a span {
display:block;
}</style></head><body>
<header>
<h1>
Let's Share</h1>
<h2>
Through</h2>
<h2>
Social Networking</h2>
</header>

Pastekan dibawah code : z-index: -1; } Lalu copy code berikut :

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>

Pastekan dibawah code : <i class="fa fa-google-plus fa-2x"></i></a></i>
</ul>
</div>
</div>

Kemudian klik pratinjau untuk melihat hasil dan klik publish selesai

Edited by. Myscript2010
Sources by. Michelle Ortner on Codepen

Category: Button Share CSS3

Subscribe to: Posts (Atom)