Skip to main content
RICODS

follow us

Cara Membuat Button Keren Dengan Css

Cara Membuat Button Keren Dengan Css - Terkadang kita perlu membuat button seperti ini apalagi jika blog kamu bertema Tutorial Blogger pastinya button ini akan sangat berguna sekali. 

Sebenarnya untuk membuat button tidak harus memakai CSS sebab kita dapat langsung menginput kode seperti ini dalam mode postingan HTML <button>Contoh Button</button> maka hasilnya menjadi begini

Tentunya tampilan button di atas terlihat sederhana dan kurang menarik, makanya kita perlu sedikit sentuhan CSS agar button terlihat bagus. Di sini saya akan berbagi bagaimana Cara Membuat Button Demo Dengan CSS.

Pertama kamu tentunya harus masuk ke dalam editor template dan letakan kode css ini:

.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}.buttonx:hover{background-color:#f78d1d!important;background:0}.buttonx:active{position:relative;top:1px}

Lalu save template.

Untuk menampilkan button dalam postingan kita hanya perlu meletakan kode pemanggil ini

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://www.ricods.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://www.ricods.com/" target="_blank">Download</a>

</div> 

Ganti url yang saya blok kuning dan lihat hasilnya selesai. Mudah sekali bukan? selamat mencoba!

You Might Also Like:

Comment Policy: Hallo sobat Anda bisa memberikan komentar sesuai dengan topik yang dibaca pada halaman ini.
Buka Komentar