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