Labkom99.Com - Efek mouse hover tentunya bisa dibuat diberbagai tempat seperti tombol button ataupun gambar. Kali ini labkom99 memberikan 30 contoh efek animasi mouse hover tombol button keren dengan HTML dan CSS3. Setiap contoh memiliki efek keren dengan gaya berbeda. 30 contoh efek animasi tombol mouse hover yang keren ini dibuat dengan CSS3 murni. Dengan menggunakan transisi CSS3 dan mengubah properti untuk membuat batas tombol, animasi teks  dan efek animasi streamer.

30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3

Sebelumnya labkom99 sudah pernah memberikan ulasan lengkap cara Membuat Efek Animasi Tombol Button Keren Dengan HTML Dan CSS3. Sehingga pada artikel ini dapat memperlengkap kumpulan efek animasi mouse hover tombol button yang sudah dibuat.

Artikel Lain Tentang Berbagai Cara Membuat Animasi Dengan HTML Dan CSS

Alat / Bahan Baku

Notepad 
Bisa menggunakan tools web programming lain untuk pemrograman 

Perhatian 

Bagi pemula yang ingin belajar membuat Efek Animasi Mouse Hover Tombol Button Keren di bagian ini,  Sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML  cara membuat template HTML, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML atau Tutorial Belajar Dasar - Dasar HTML: Hypertext Markup Language.

Metode / Langkah

Dengan hanya menggunakan tag HTML <div> untuk membuat sebuah blok untuk meletakkan tombol. Berikut kode HTML yang digunakan:

<div class="wrapper-inner-tab-backgrounds-first">
    <div class="sim-button button1">
        <span>Login</span>
    </div>
</div>
<div class="wrapper-inner-tab-backgrounds-second">
    <div class="sim-button button1">
        <span>Register</span>
    </div>
    </div>
<div class="wrapper-inner-tab-backgrounds-third">
    <div class="sim-button button1">
        <span>Cancel</span>
    </div>
</div>

Kemudian untuk bagian CSS hanya membuat atribut untuk menciptakan gaya animasi tombol. Metode position tombol dibuat relative, sehingga memudahkan pemosisian elemen di dalamnya.

.button1 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
}
.button1 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button1:hover {
 background-color: rgba(255,255,255,0.2);
 -webkit-border-radius: 25px;
 -moz-border-radius: 25px;
 border-radius: 25px; 
}

Kemudian untuk berbagai contoh Demonya dapat dilihat di bawah



Labkom99 Button 1
Login
Register
Cancel
Labkom99 Button 2
Login
Register
Cancel
Labkom99 Button 3
Login
Register
Cancel
Labkom99 Button 4
Login
Register
Cancel
Labkom99 Button 5
Login
Register
Cancel
Labkom99 Button 6
Login
Register
Cancel
Labkom99 Button 7
Login
Register
Cancel
Labkom99 Button 8
Login
Register
Cancel
Labkom99 Button 9
Login
Register
Cancel
Labkom99 Button 10
Login
Register
Cancel
Labkom99 Button 11
Login
Register
Cancel
Labkom99 Button 12
Login
Register
Cancel
Labkom99 Button 13
Login
Register
Cancel
Labkom99 Button 14
Login
Register
Cancel
Labkom99 Button 15
Login
Register
Cancel
Labkom99 Button 16
Login
Register
Cancel
Labkom99 Button 17
Login
Register
Cancel
Labkom99 Button 18
Login
Register
Cancel
Labkom99 Button 19
Login
Register
Cancel
Labkom99 Button 20
Login
Register
Cancel
Labkom99 Button 21
Login
Register
Cancel
Labkom99 Button 22
Login
Register
Cancel
Labkom99 Button 23
Login
Register
Cancel
Labkom99 Button 24
Login
Register
Cancel
Labkom99 Button 25
Login
Register
Cancel
Labkom99 Button 26
Login
Register
Cancel
Labkom99 Button 27
Login
Register
Cancel
Labkom99 Button 28
Login
Register
Cancel
Labkom99 Button 29
Login
Register
Cancel
Labkom99 Button 30
Login
Register
Cancel



<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Labkom99.com - 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3</title>
<Style>
#awesome{
 margin-top: 200px !important; 
}
#wrapper-inner{
 width: 950px;
 margin-right: auto;
 margin-left: auto;
}
.wrapper-inner-tab{
 float: left;
 width: 100%;
 margin-top: 125px;
}
.wrapper-inner-tab-title {
 width: 100%;
 margin-top: 30px;
 font-size: 25px;
 color: #666666;
 float: left;
 text-align: center;
 margin-bottom: 80px;
}
.wrapper-inner-tab-backgrounds { 
 float: left;
 height: 300px;
 width: 950px;
}
.wrapper-inner-tab-backgrounds-first{
 float: left;
 height: 300px;
 width: 33.33%;
 background-color: #feb41d;
}
.wrapper-inner-tab-backgrounds-second{
 float: left;
 height: 300px;
 width: 33.33%;
 background-color: #5e7c87;
}
.wrapper-inner-tab-backgrounds-third{
 float: left;
 height: 300px;
 width: 33.33%;
 background-color: #4c5f6d;
}
.sim-button{
 line-height: 50px;
 height: 50px;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
 margin-top: 125px;
 width: 60%;
 cursor: pointer;
}
.button1 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
}
.button1 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button1:hover {
 background-color: rgba(255,255,255,0.2);
 -webkit-border-radius: 25px;
 -moz-border-radius: 25px;
 border-radius: 25px; 
}
.button2 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button2 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button2 span {
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.button2:hover{
 background-color: rgba(255,255,255,0.2);
}
.button2:hover > span{
 opacity: 0;
 -webkit-transform: translate(0px,-40px);
 transform: translate(0px,-40px);
}
.button2::after{
 content: attr(data-text);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 opacity: 0;
 -webkit-transform: translate(0, 30%);
 transform: translate(0, 30%);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s; 
}
.button2:hover::after{
 opacity: 1;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
}
.button3 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button3 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button3 span {
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.button3:hover{
 background-color: rgba(255,255,255,0.2);
}
.button3:hover > span{
 opacity: 0;
 -webkit-transform: translate(0px,40px);
 transform: translate(0px,40px);
}
.button3::after{
 content: attr(data-text);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 opacity: 0;
 -webkit-transform: translate(-30%, 0);
 transform: translate(-30%, 0);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s; 
}
.button3:hover::after{
 opacity: 1;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
}
.button4 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button4 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button4 > span {
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.button4:hover{
 background-color: rgba(255,255,255,0.2);
}
.button4:hover > span{
 opacity: 0;
 -webkit-transform: translate(0px,40px);
 transform: translate(0px,40px);
}
.button4::after{
 content: attr(data-text);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 opacity: 0;
 -webkit-transform: translate(-30%, -50%) rotate(-30deg);
 transform: translate(-30%, -50%) rotate(-30deg);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s; 
 
}
.button4:hover::after{
 opacity: 1;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
}
@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.button5{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
}
.button5 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button5:hover{
 -webkit-animation-name: jello;
 animation-name: jello;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 background-color: rgba(255,255,255,0.2);
 
}
.button6{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 position: relative; 
}
.button6 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button6 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button6::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 background-color: rgba(255,255,255,0.5);
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 -o-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: scale(0.5, 1);
 transform: scale(0.5, 1);
}
.button6:hover::before{
 opacity: 1;
 -webkit-transform: scale(1, 1);
 transform: scale(1, 1);
}
.button7{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 position: relative; 
}
.button7 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button7 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button7::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 background-color: rgba(255,255,255,0.5);
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 -o-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: scale(1, 0.5);
 transform: scale(1, 0.5);
}
.button7:hover::before{
 opacity: 1;
 -webkit-transform: scale(1, 1);
 transform: scale(1, 1);
}
.button8{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 position: relative; 
}
.button8 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button8 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button8::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 0%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 background-color: rgba(255,255,255,0.5);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;

}
.button8:hover::before{
 opacity: 1;
 width: 100%;
}
.button9{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 position: relative; 
 overflow: hidden;
}
.button9 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button9 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button9::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 background-color: rgba(255,255,255,0.5);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
.button9:hover::before{
 opacity: 1;
 -webkit-transform: skewX(-180deg)  scale(0.5,1);
 transform: skewX(-180deg)  scale(0.5,1);
}
.button10{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative; 
}
.button10 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button10 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button10::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 background-color: rgba(255,255,255,0.25);
}
.button10::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 background-color: rgba(255,255,255,0.25);

}
.button10:hover::before{
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
   background-color: rgba(255,255,255,0);
}
.button10:hover::after{
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
   background-color: rgba(255,255,255,0);
}
.button11{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 
 position: relative;
 perspective: 2000px; 

}
.button11 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button11 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button11::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 background-color: rgba(255,255,255,0.25);
}
.button11::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 border: 1px solid rgba(255,255,255,0.5);
 background-color: rgba(255,255,255,0.25);
}
.button11:hover::before{
 -webkit-transform: rotateX(60deg) translate(0px,40px);
 transform: rotateX(60deg) translate(0px,40px) ; 
}
.button11:hover::after{
 -webkit-transform: rotateX(-60deg) translate(0px,-40px)  ;
 transform: rotateX(-60deg) translate(0px,-40px) ; 
}

.button12{
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button12 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button12 span{
 z-index: 2; 
 display: block;
 position: absolute;
 width: 100%;
 height: 100%; 
}
.button12::before{
 content: '';
 position: absolute;
 top: 50px;
 left: -5px;
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 190px solid rgba(255,255,255,0.25);
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
.button12::after{
 content: '';
 position: absolute;
 top: 50px;
 left: -5px;
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 190px solid rgba(255,255,255,0.25);
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
.button12::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button12:hover::before{
 opacity: 1;
 -webkit-transform: translate(0px,-190px);
 transform: translate(0px,-190px); 
}
.button12:hover::after{
 opacity: 1;
 -webkit-transform: translate(0px,-150px);
 transform: translate(0px,-150px); 
}
.button13 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
}
.button13 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button13::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 border: 1px solid rgba(255,255,255,0.5);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.button13:hover::before{
 opacity: 0;
 -webkit-transform: scale(1.2,1.2);
 transform: scale(1.2,1.2);
}
.button13::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: scale(0.5,0.5);
 transform: scale(0.5,0.5);
}
.button13:hover::after{
 opacity: 1 ;
 -webkit-transform: scale(1,1);
 transform: scale(1,1);
}
.button14 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
}
.button14 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button14::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;

}
.button14:hover::before{
 opacity: 0 ;
 -webkit-transform: scale(0.5,0.5);
 transform: scale(0.5,0.5);
}
.button14::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 border: 1px solid rgba(255,255,255,0.5);
 -webkit-transform: scale(1.2,1.2);
 transform: scale(1.2,1.2);
}
.button14:hover::after{
 opacity: 1;
 -webkit-transform: scale(1,1);
 transform: scale(1,1);
}
.button15 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button15 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button15::before, .button15::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(0,-100%);
 transform: translate(0,-100%);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button15::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button15:hover::before, .button15:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0);
}
.button16 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button16 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button16::before, .button16::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(-100%,0);
 transform: translate(-100%,0);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button16::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button16:hover::before, .button16:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button17 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button17 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button17::before, .button17::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(-13%,-190%) rotate(-30deg);
 transform: translate(-13%,-190%) rotate(-30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button17::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button17:hover::before, .button17:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button18 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button18 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button18::before, .button18::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(13%,190%) rotate(-30deg);
 transform: translate(13%,190%) rotate(-30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button18::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button18:hover::before, .button18:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button19 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button19 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button19::before{
 content: '';
 position: absolute; 
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(13%,190%) rotate(-30deg);
 transform: translate(13%,190%) rotate(-30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button19::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(-13%,-190%) rotate(-30deg);
 transform: translate(-13%,-190%) rotate(-30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button19::before{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button19:hover::before, .button19:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button20 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button20 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button20::before{
 content: '';
 position: absolute; 
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(13%,-190%) rotate(30deg);
 transform: translate(13%,-190%) rotate(30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button20::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    z-index: 1;
 background-color: rgba(255,255,255,0.25);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-transform: translate(-13%,-190%) rotate(-30deg);
 transform: translate(-13%,-190%) rotate(-30deg);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button20::before{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button20:hover::before, .button20:hover::after{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button21 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button21 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button21::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 opacity: 1;
 -webkit-transform: translate(0,-105%);
 transform: translate(0,-105%);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button21:hover::before{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button22 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button22 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button22::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 opacity: 1;
 -webkit-transform: translate(-105%,0);
 transform: translate(-105%,0);
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button22:hover::before{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button23 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button23 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button23::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 opacity: 1;
 -webkit-transform: translate(-13%,-190%) rotate(-30deg);
 transform: translate(-13%,-190%) rotate(-30deg);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button23:hover::before{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button24 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button24 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button24::before, .button24::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 opacity: 1;
 -webkit-transform: translate(0,-105%);
 transform: translate(0,-105%);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button24::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button24:hover::before, .button24:hover::after{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button25 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button25 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button25::before, .button25::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 opacity: 1;
 -webkit-transform: translate(-105%,0);
 transform: translate(-105%,0);
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button25::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button25:hover::before, .button25:hover::after{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button26 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button26 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button26::before, .button26::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 opacity: 1;
 -webkit-transform: translate(-13%,-190%) rotate(-30deg);
 transform: translate(-13%,-190%) rotate(-30deg);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: rgba(255,255,255,1);
 background-color: rgba(255,255,255,0.25);
}
.button26::after{
 -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.button26:hover::before, .button26:hover::after{
 opacity: 0;
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button27 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 position: relative;
 border: 1px solid rgba(255,255,255,0.5);
 overflow: hidden;
}
.button27:hover{
 border: 1px solid rgba(255,255,255,0);
}
.button27 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button27::before{
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 1px;
 z-index: 1;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 -webkit-transform: translate(-100%, -600%) rotate(30deg);
 transform: translate(-100%, -600%)  rotate(30deg);
 background-color: rgba(255,255,255,0.5);
 -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

}
.button27:hover::before{
 -webkit-transform: translate(0,0);
 transform: translate(0,0); 
}
.button28 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
}
.button28 span{
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.button28 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button28::before{
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: rgba(255,255,255,0.5);
 border-bottom-color: rgba(255,255,255,0.5);
 -webkit-transform: scale(0.1, 1);
 transform: scale(0.1, 1);
 
}
.button28:hover span{
 letter-spacing: 2px;
 }
.button28:hover::before{
 opacity: 1; 
 -webkit-transform: scale(1, 1);
 transform: scale(1, 1);
 
}
.button28::after{
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 background-color: rgba(255,255,255,0.25);
 
}
.button28:hover::after{
 opacity: 0; 
 -webkit-transform: scale(0.1, 1);
 transform: scale(0.1, 1);
}
.button29 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: rgba(255,255,255,0.5);
 border-left-color: rgba(255,255,255,0.5);

}
.button29 span{
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 }
.button29:hover span{
 letter-spacing: 2px;
 }
.button29:hover{
 border-right-color: rgba(255,255,255,0);
 border-left-color: rgba(255,255,255,0);
}

.button29 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button29::before{
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 1px;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 background-color: rgba(255,255,255,0.5);
 
}
.button29:hover::before{
 -webkit-transform: translate(0,-25px) rotate(-45deg);
 -moz-transform: translate(0,-25px) rotate(-45deg);
 transform: translate(0,-25px) rotate(-45deg);
}
.button29::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 1px;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 background-color: rgba(255,255,255,0.5);
}
.button29:hover::after{
 -webkit-transform: translate(0,25px) rotate(45deg);
 -moz-transform: translate(0,25px) rotate(45deg);
 transform: translate(0,25px) rotate(45deg);
}
.button30 {
 color: rgba(255,255,255,1);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 position: relative;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: rgba(255,255,255,0.5);
 border-bottom-color: rgba(255,255,255,0.5);
}
.button30 span{
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 }
.button30:hover span{
 letter-spacing: 2px;
 }
.button30:hover{
 border-top-color: rgba(255,255,255,0);
 border-bottom-color: rgba(255,255,255,0);
}
.button30 a{
 color: rgba(51,51,51,1);
 text-decoration: none;
 display: block;
}
.button30::before{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 1px;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 background-color: rgba(255,255,255,0.5);
}
.button30:hover::before{
 -webkit-transform: translate(-94.9845px,0) rotate(270deg);
 -moz-transform: translate(-94.9845px,0) rotate(270deg);
 transform: translate(-94.9845px,0) rotate(270deg);
}
.button30::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 1px;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 background-color: rgba(255,255,255,0.5);
}
.button30:hover::after{
 -webkit-transform: translate(94.9845px,0) rotate(180deg);
 -moz-transform: translate(94.9845px,0) rotate(180deg);
 transform: translate(94.9845px,0) rotate(180deg);
}
</Style>
</head>
<body>
    <div id="wrapper-inner">
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 1</div>
      <div class="wrapper-inner-tab-backgrounds">
      <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button1"><span>Login</span></div></div>
      <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button1"><span>Register</span></div></div>
      <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button1"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 2</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button2" data-text="Login"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button2" data-text="Register"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button2" data-text="Cancel"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 3</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button3" data-text="Login"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button3" data-text="Register"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button3" data-text="Cancel"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 4</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button4" data-text="Login"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button4" data-text="Register"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button4" data-text="Cancel"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 5</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button5"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button5"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button5"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 6</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button6"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button6"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button6"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 7</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button7"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button7"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button7"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 8</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button8"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button8"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button8"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 9</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button9"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button9"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button9"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 10</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button10"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button10"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button10"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 11</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button11"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button11"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button11"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 12</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button12"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button12"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button12"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 13</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button13"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button13"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button13"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 14</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button14"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button14"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button14"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 15</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button15"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button15"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button15"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 16</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button16"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button16"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button16"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 17</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button17"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button17"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button17"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 18</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button18"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button18"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button18"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 19</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button19"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button19"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button19"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 20</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button20"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button20"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button20"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 21</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button21"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button21"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button21"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 22</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button22"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button22"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button22"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 23</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button23"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button23"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button23"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 24</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button24"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button24"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button24"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 25</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button25"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button25"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button25"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 26</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button26"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button26"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button26"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 27</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button27"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button27"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button27"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 28</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button28"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button28"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button28"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 29</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button29"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button29"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button29"><span>Cancel</span></div></div>
     </div>
    </div>
    <div class="wrapper-inner-tab">
     <div class="wrapper-inner-tab-title">Labkom99 Button 30</div>
     <div class="wrapper-inner-tab-backgrounds">
     <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button30"><span>Login</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-second"><div class="sim-button button30"><span>Register</span></div></div>
     <div class="wrapper-inner-tab-backgrounds-third"><div class="sim-button button30"><span>Cancel</span></div></div>
     </div>
    </div>
    </div><!--wrapper-inner--> 
</body>
</html>

Selamat Mencoba .....

Komentar