Memberi Gaya dan Efek animasi pada Tombol dan Link

Penerapan CSS

Memberikan variasi gaya dan efek untuk tombol ataupun link sebenarnya sangat sederhana, hanya saja dapat mempengaruhi gaya pada tombol lain atau link lainnya. Untuk menghindari pengaruh gaya tersebut disarankan menggunakan class tersendiri.

Berikut ini langkah-langkah penerapan gaya yang tepat untuk elemen yang diinginkan.

Pemberian class

Contoh :
Untuk tombol

<button class='nama-class'>Teks tombol</button>

misal :

<button class='tombol'>Teks tombol</button>

Untuk link

<a class='nama-class' href='https://www.url-contoh.com'>Teks link</a>

misal :

<a class='myLink' href='https://www.url-contoh.com'>Teks link</a>

CSS dan efek untuk tombol

<style>

button.tombol{
  padding: 15px 25px;
  font-size: 24px ;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #555;
  background-color: #f0f0f0;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button.tombol:hover {background-color: #ddd!important}

button.tombol:active {
  background-color: #ccc;
  box-shadow: 0 5px #999;
  transform: translateY(4px);
}

</style>

CSS gaya dan efek untuk link

<style>

a.myLink{
color:#555;
text-decoration:none;
padding:15px 10px;
margin:10px;
background:#f0f0f0;
border-radius:50%
}

a.myLink:hover{background:#ddd}

a.myLink:active{
background:#ccc;
}

</style>

Hasil :

Arahkan kursor untuk melihat efek :hover
Klik link / tombol untuk melihat efek :active
Hasil link teks :

Klik

Contoh lain link dengan ikon :



Hasil penerapan untuk tombol: