CSS-only responsive buttons

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

POPULAR

Blog Archive