Cara Membuat Tombol 3D

Ardi21_ansyah

Blogger, Tips N' Trick Blogger

Jumat, 13 Februari 2015

Belum ada komentar

Baiklah kali ini saya akan memberikan

Tips N' Trick Cara Membuat Tombol 3D seperti di bawah ini:

First, Masukan CSS Dibawah ini diatas kode ]]></b:skin> atau </style>

/* CSS TOMBOL 3D THEME by BLOGGER ANDROID 21™
--------------------------------------------------*/
.btn{     border:none;
    position:relative;
    background:none;
    padding:28px 90px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:0.9em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.btn:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.btn_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.btn-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.btn-3d:active{
    background:#55b7f3;
}
.btn-3da:after{
    width:100%;
    height:42%;
    left:0;
    top:-40%;
    background:#53a6d7;
    transform-origin:0% 100%;
    transform:rotateX(90deg);
 
 
}
.btn-3da:hover{
    transform: rotateX(-45deg);
}
.btn-3db:after{
    width:100%;
    height:40%;
    left:0;
    top:100%;
    background:#53a6d7;
    transform-origin: 0% 0%;
    transform:rotateX(-90deg);
}
.btn-3db:hover{
    transform:rotateX(35deg);
}
.btn-3dc:after{
    width:20%;
    height:100%;
    left:-20%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:100% 0%;
    -webkit-transform:rotateY(-90deg);
    -moz-transform-origin:100% 0%;
    -moz-transform:rotateY(-90deg);
    -ms-transform-origin:100% 0%;
    -ms-transform:rotateY(-90deg);
    transform-origin:100% 0%;
    transform:rotateY(-90deg);
}
.btn-3dc:hover{
    transform:rotateY(25deg);
}
.btn-3dd:after{
    width:20%;
    height:100%;
    left:100%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:0% 0%;
    -webkit-transform:rotateY(90deg);
    -moz-transform-origin:0% 0%;
    -moz-transform:rotateY(90deg);
    -ms-transform-origin:0% 0%;
    -ms-transform:rotateY(90deg);
    transform-origin:0% 0%;
    transform:rotateY(90deg);
}
.btn-3dd:hover{
    -webkit-transform:rotateY(-15deg);
    -moz-transform:rotateY(-15deg);
    -ms-transform:rotateY(-15deg);
    transform:rotateY(-15deg);
}


@media screen and (max-width:480px){
    .container{
        font-size:1.2em;
    }
}

Second, Masukan kode di bawah ini dipostingan atau pada
di link yang ingin diberi gaya Tombol 3D

    <p class="btn_perspective">
      <a href="/"><button class="btn btn-3d btn-3da">Tombol 1</button></a>
    </p>
    <p class="btn_perspective">
      <a href="/"><button class="btn btn-3d btn-3db">Tombol 2</button></a>
    </p>
    <p class="btn_perspective">
      <a href="/"><button class="btn btn-3d btn-3dc">Tombol 3</button></a>
    </p>
    <p class="btn_perspective">
      <a href="/"><button class="btn btn-3d btn-3dd">Tombol 4</button></a>
    </p>