Button Pure CSS Hover Keren

Kali ini keenny akan membagikan source kode button only CSS. Seperti yang kita ketahui CSS merupakan bahasa web design untuk mempercantik suatu tampilan website. Walaupun terkesan sederhana, dengan belajar semua atribut dan memahaminya akan membuat CSS menawan.
Tombol keren CSS | Kenscripts

Kali ini keenny akan membagikan source kode button only CSS. Seperti yang kita ketahui CSS merupakan bahasa web design untuk mempercantik suatu tampilan website. Walaupun terkesan sederhana, dengan belajar semua atribut dan memahaminya akan membuat CSS menawan.

Salah satunya adalah Source Code Button HTML dan CSS Only. HTML disini hanya sebagai kerangkanya, fokus utama kita adalah CSS.

Disini kita tidak memerlukan javascript untuk membuat tombol agar lebih menarik, kita hanya akan bermain dengan element CSS itu saja.

Dengan menggunakan kode button di bawah ini tentu akan membuat lebih menarik tampilan website dan tetap saja menjadi loading yang ringan.

Berikut kode button CSS keren.

1. Kode HTML

<div class="button_container">
  <a href="https://kenscripts.blogspot.com" class="link" target=" _blank">
  <button class="btn"><span>Hover me!</span></button></a>
</div>


2. Kode CSS

.button_container {position: absolute;left: 0;right: 0;top: 30%;}
.btn {border: none;display: block;text-align: center;cursor: pointer;text-transform: uppercase;outline: none;overflow: hidden;position: relative;color: #fff;font-weight: 700;font-size: 15px;background-color: #222;padding: 17px 60px;margin: 0 auto;box-shadow: 0 5px 15px rgba(0,0,0,0.20);}
.btn span {position: relative; z-index: 1;}
.btn:after {content: "";position: absolute;left: 0;top: 0;height: 490%; width: 140%; background: blue; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform:translateX(-98%) translateY(-25%) rotate(45deg); transform: translateX(-98%) translateY(-25%) rotate(45deg);}
.btn:hover:after {-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);transform: translateX(-9%) translateY(-25%) rotate(45deg);}

Terima kasih telah berkunjung.


Untuk preview dan Kodenya

Kode dan Preview

Untuk full demo

Demo
Kenny is my name, someone who is quite calm with a charming smile. Don't bother me if you don't want to see the devil. Don't act like you're innocent.
© Kenscripts. All rights reserved. Developed by Jago Desain