Tutorial: Tukarkan Link Biasa Menjadi Button dengan CSS
Untuk entri ni, saya akan tunjukkan trick untuk tukar link kepada button. Tapi, tak semua link logik untuk ditukar menjadi button. Contoh link yang boleh tukar jadi button macam button "read more" dekat blog ni. So saya anggap korang dah tahu basic CSS dan HTML, well kalau tak tahu boleh tanya. Jangan malu, jangan segan.
So, taknak cakap panjang kita tunjuk macam mana nak buat.
Skill yang diperlukan : Basic CSS dan HTML
Jadi misi kali nak jadikan link yang macam ni LINK jadi macam yang kat bawah ni :
Untuk HTML, kita pastikan anchor tag iaitu <a href="URL">link</a> ada kat area mana.
dalam kes ni, target kita ada dalam <div> dengan class='testbutton' jadi bila translate ke CSS
jadi div.testbutton a.
So CSS kita :
pastikan code CSS dimasukkan dalam ruangan CSS iaitu <style> atau untuk template blogger boleh dimasukkan selepas kod :
atau sebelum ]]></b:skin>
atau korang boleh tambah ruang css baru selepas ]]></b:skin> dengan menambah code <b:template-skin> <![CDATA[ dan ]]> </b:template-skin> lepastu masukkan kod CSS baru korang kat antara <b:template-skin> <![CDATA[ dengan ]]> </b:template-skin> tadi.
Jadi sampai situ sahaja entri kali ni, selamat mencuba.
Kalau suka boleh share atau tinggalkan komen kat bawah ni.
( Setiap posting di blog ni adalah di bawah Creative Common License 4.0, boleh copy & paste tapi mesti di nyatakan link dan dikreditkan kepada penulis asal )
So, taknak cakap panjang kita tunjuk macam mana nak buat.
Skill yang diperlukan : Basic CSS dan HTML
Jadi misi kali nak jadikan link yang macam ni LINK jadi macam yang kat bawah ni :
So, hows the code? Macam mana nak buat ? sini :
HTML : <div class="testbutton"> <a href="javascript:void(0)">NoxAsch</a> </div>
Untuk HTML, kita pastikan anchor tag iaitu <a href="URL">link</a> ada kat area mana.
dalam kes ni, target kita ada dalam <div> dengan class='testbutton' jadi bila translate ke CSS
jadi div.testbutton a.
So CSS kita :
<style>
div.testbutton a {
display: inline-block;
padding: 5px 10px;
background-color: #2229ab;
box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
-moz-box-shadow: 0 0 2px 2px #ccc;
color: #fff;
}
div.testbutton a:hover {
background-color: #009900;
}
</style>
pastikan code CSS dimasukkan dalam ruangan CSS iaitu <style> atau untuk template blogger boleh dimasukkan selepas kod :
<![CDATA[/* ----------------------------------------------- Blogger Template Style Name: NoxAsch Custom Template Designer: NoxAsch URL: https://twitter.com/ASCHsama Date: 19 August 2014 ----------------------------------------------- */
atau sebelum ]]></b:skin>
atau korang boleh tambah ruang css baru selepas ]]></b:skin> dengan menambah code <b:template-skin> <![CDATA[ dan ]]> </b:template-skin> lepastu masukkan kod CSS baru korang kat antara <b:template-skin> <![CDATA[ dengan ]]> </b:template-skin> tadi.
Jadi sampai situ sahaja entri kali ni, selamat mencuba.
Kalau suka boleh share atau tinggalkan komen kat bawah ni.
( Setiap posting di blog ni adalah di bawah Creative Common License 4.0, boleh copy & paste tapi mesti di nyatakan link dan dikreditkan kepada penulis asal )
