01/28/16 | Mys2010 on Codepen

Memasang kode CSS Button Hover Rotate
Kode ini menampilkan Tombol Sosial Media yang berputar. 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

Penjelasan :
Terapkan Link Title pada code yang berwarna magenta, tambahkan background gambar jika diperlukan,
Copy kode berikut pastekan dibawah kode : //@ sourceURL=pen.js
</script> kemudian klik publish selesai

Edited by. Myscript2010
Sources by. John Motyl on Codepen

DEMOSHOW

Category: Sahre Playing with math in Js

Memasang kode CSS Responsive Buttons
Kode ini menampilkan Tombol Menu Horizontal. 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

Penjelasan :
Terapkan Link title yang diwarnai, tambahkan teks animasi jika diperlukan. Copy code berikut pastekan dibawah code : .navigation li:last-child{margin-right:0;}}</style>

<style class="Text Animasi-styles">
*{    margin:0px;
padding:0px;}
body
{
background:url(http://Link Gambar.jpg);
background-size:cover;
background-repeat:no-repeat;
font-family: "Open Sans", sans-serif;
font-size: 11px;
}
</style>

<style class="text-animated-styles">
.intro-text h2 {
   font-size: 70px;
   font-weight: 200;
   width: 100%;
   overflow: hidden;
   text-transform: uppercase;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 0;
   left: 0;
   letter-spacing: 14px;
   text-align: center;
   opacity: 0;
}

.intro-text h2,
.intro-text h2 > span {
   height: 100%;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -moz-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.intro-text h2 > span {
   margin: 0 15px;
}

.intro-text h2 > span > span {
   display: inline-block;
   -webkit-perspective: 1000px;
   -moz-perspective: 1000px;
   perspective: 1000px;
   -webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
}

.intro-text h2 > span > span > span {
   display: inline-block;
   color: hsla(0,0%,0%,0);
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   -webkit-animation: TextSequence 5.2s linear forwards;
   -moz-animation: TextSequence 5.2s linear forwards;
   animation: TextSequence 5.2s linear forwards;
}

.intro-text h2:nth-child(2) > span > span > span {
   -webkit-animation-delay: 5s;
   -moz-animation-delay: 5s;
   animation-delay: 5s;
}

.intro-text h2:nth-child(3) > span > span > span {
   -webkit-animation-delay: 10s;
   -moz-animation-delay: 10s;
   animation-delay: 10s;
}

.intro-text h2:nth-child(4) > span > span > span {
   -webkit-animation-delay: 15s;
   -moz-animation-delay: 15s;
   animation-delay: 15s;
}

.intro-text h2:nth-child(5) > span > span > span {
   font-size: 150px;
   -webkit-animation-delay: 21s;
   -moz-animation-delay: 21s;
   animation-delay: 21s;
   -webkit-animation-duration: 8s;
   -moz-animation-duration: 8s;
   animation-duration: 8s;
}

.intro-text h2:nth-child(6) > span > span > span {
   -webkit-animation-delay: 30s;
   -moz-animation-delay: 30s;
   animation-delay: 30s;
}

.intro-text h2:nth-child(7) > span > span > span {
   -webkit-animation-delay: 34s;
   -moz-animation-delay: 34s;
   animation-delay: 34s;
}

@-webkit-keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0;
       -webkit-transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       -webkit-transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       -webkit-transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       -webkit-transform: translateZ(130px);
       pointer-events: none;
   }
}

@-moz-keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0.2;
       -moz-transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       -moz-transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       -moz-transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       -moz-transform: translateZ(130px);
       pointer-events: none;
   }
}

@keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0.2;
       transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       transform: translateZ(130px);
       pointer-events: none;
   }
}

.intro-text h2:nth-child(8) > span > span > span {
   font-size: 30px;
   -webkit-animation: FadeIn 4s linear 40s forwards;
   -moz-animation: FadeIn 4s linear 40s forwards;
   animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn {
   0% {
       opacity: 0;
       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

@-moz-keyframes FadeIn {
   0% {
       opacity: 0;
       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

@keyframes FadeIn {
   0% {
       opacity: 0;

       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

/* Bold Text */
.intro-text h2:first-child .word3,
.intro-text h2:nth-child(2) .word2,
.intro-text h2:nth-child(4) .word2 {
   font-weight: 600;
}</style>
<div class="intro-text" id="intro-text">
               <h2>
WELCOME</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
LEARN EDITING </h2>
<h2>
SCRIPT CSS HTML </h2>
<h2>
CODEPEN</h2>
<h2>
EDITED BY.</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
COPYRIGHT2015 CIBEBER CIMAHI</h2>
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
$(document).ready(function () {
    $('#intro-text > h2').css('opacity', 1).lettering('words').children('span').lettering().children('span').lettering();
});
//# sourceURL=pen.js
</script>

Edited by. Myscript2010
Sources by. Kevadamson On Codepen

DEMOSHOW

Category: CSS-only responsive buttons

Mys2010 on Codepen

Sahre Playing with math in Js

CSS-only responsive buttons

POPULAR

Blog Archive