Cara Mempercantik Button Saat Kita Mengklik
Mungkin cara ini telah umum teman-teman bikin ya, dengan hover, dan kita berikan warnanya ketika kita menghover sebuah konten, kadang tak hanya warna ya tapi dapat berupa padding, width, dan css lain-lain, tapi disini saya akan mencoba cara mempercantik button ketika kita mengklik, yang nanti saya akan coba itu bawaan dari sebuah framework materialize ya, saya pun sempat merancang sebuah artikel mengenai materialize lainya, nanti teman-teman pun dapat mampir ya, oke karenanya dari itu jangan kemana-mana simak terus ya teman-teman.
Bagi cara mempercantik button ketika kita mengklik, disni saya tak menggunakan hover ya, seperti yang tadi saya tulis di atas, kita menggunakan atribut yang terdapat atau bawaan di sebuah framework materialize, jadi lebih gampang buka kita tak perlu repot-repot lagi merancang sebuah CSSnya, kita tinggal memberikan sebuah class karenanya 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 seketika saja bagaimana cara membuatnya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Mempercantik button Dikala 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 laman 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 Dikala 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>
Dapat teman-teman lihat sendiri, kok banyak, kita dapat memberikan beberapa macam warna ya, dan kita pun dapat merancang sendiri atau memberika efek warna yang kita inginkan dengan cara merancang kode cssnya lagi seperti ini:
.waves-effect.waves-brown .waves-ripple {
background-color: rgba(121, 85, 72, 0.65);
}Dan hasilnya seperti ini ya:
Dapat dilihat walaupun gambarnya kecil, tombol itu berubah warna ketika saya klik, oiya saya lupa memberitahukan kita pun dapat merancang tombol bulat seperti di atas dengan cara memberikan class waves-circle, dan saya rasa lumayan hingga disni belajar kita mengenai cara mempercantik button ketika kita mengklik, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
