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>
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>
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 :hoverKlik link / tombol untuk melihat efek :active
Hasil link teks :
Klik
Contoh lain link dengan ikon :
Hasil penerapan untuk tombol: