Mungkin cara ini sudah umum teman-teman buat ya, dengan hover, dan kita berikan warnanya saat kita menghover sebuah konten, kadang tidak hanya warna ya tapi bisa berupa padding, width, dan css lain-lain, tapi disini saya akan mencoba cara mempercantik button saat kita mengklik, yang nanti saya akan coba itu bawaan dari sebuah framework materialize ya, saya juga sempat membuat sebuah artikel tentang materialize lainya, nanti teman-teman juga bisa mampir ya, oke maka dari itu jangan kemana-mana simak terus ya teman-teman.
Untuk cara mempercantik button saat kita mengklik, disni saya tidak menggunakan hover ya, seperti yang tadi saya tulis di atas, kita menggunakan atribut yang ada atau bawaan pada sebuah framework materialize, jadi lebih mudah buka kita tidak perlu repot-repot lagi membuat sebuah CSSnya, kita tinggal memberikan sebuah class maka jadilah efek yang di berikan, nanti efek apa si mas yang timbul ? efek yang timbul itu seperti ketika kita klik, warnanya akan berubah dengan smooth, lalu ketika saya lepaskan akan kembali seperti semula, bagaimana jadi lebih cantik ya, oke langsung saja bagaimana cara membuatnya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Mempercantik button Saat Kita Mengklik</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<-e-style type="text/css">
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Mempercantik button Saat Kita Mengklik</h1>
<a href="#!" class="btn waves-effect waves-red">Send</a>
<a href="#!" class="btn waves-effect waves-yellow">Send</a>
<a href="#!" class="btn waves-effect waves-orange">Send</a>
<a href="#!" class="btn waves-effect waves-purple">Send</a>
<a href="#!" class="btn waves-effect waves-green">Send</a>
<a href="#!" class="btn waves-effect waves-teal">Send</a>
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<a href="#!" class="waves-effect waves-circle waves-red btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<a href="#!" class="waves-effect waves-circle waves-yellow btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<a href="#!" class="waves-effect waves-circle waves-orange btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<a href="#!" class="waves-effect waves-circle waves-purple btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<a href="#!" class="waves-effect waves-circle waves-green btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<!--Import jQuery before materialize.js-->
<-e-script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<-e-script type="text/javascript" src="js/materialize.min.js"></script>
</div>
</body>
</html>
Bisa teman-teman lihat sendiri, kok banyak, kita bisa memberikan beberapa macam warna ya, dan kita juga bisa membuat sendiri atau memberika efek warna yang kita inginkan dengan cara membuat kode cssnya lagi seperti ini:
.waves-effect.waves-brown .waves-ripple {
background-color: rgba(121, 85, 72, 0.65);
}
Dan hasilnya seperti ini ya:
Bisa dilihat walaupun gambarnya kecil, tombol itu berubah warna ketika saya klik, oiya saya lupa memberitahukan kita juga bisa membuat tombol bulat seperti di atas dengan cara memberikan class waves-circle, dan saya rasa cukup sampai disni belajar kita tentang cara mempercantik button saat kita mengklik, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.