Posted on by

Tips-trik Kustomisasi Tombol WordPress

wpJakarta.Com – Tips-trik Kustomisasi Tombol WordPress. Satu lagi element yang kurang menarik pada tema website storefront by WooCommerce adalah tampilan block tombolnya. Rata dan kaku juga dengan warna default yang sangat tidak menarik. Beruntung pada WordPress versi 5.5, kita dapat menggunakan warna “pattern”. Atau warna dengan tampilan paduan 2 atau 3 warna. Pada artikel ini kami sedikit memberikan tips-trik kustomisasi tombol WordPress khususnya yang menggunakan tema website storefront.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Artikel WordPress lainnya

Tips-trik kustomisasi tombol WordPress dengan memberikan warna

Tips-trik yang pertama kustomisasi tombol WordPress, tentu saja dengan memberikan warna. Jangan biarkan tombol di website plain hanya warna default -biasanya abu-abu. Jika website anda bekerja sebagai “mesin” penghasil uang dari niche afiliasi misalnya. Maka mutlak rasanya untuk memberikan kustomisasi tombol dengan warna yang sesuai. Karena tentu anda mengharapkan seseorang untuk mengklik tombol tersebut. Pastikan untuk memberikan warna yang sesuai dengan color palette desain website.

Artikel WooCommerce lainnya

Tips-trik kustomisasi tombol WordPress dengan kode CSS

Tips-trik Kustomisasi Tombol WordPress
ilustrasi gambar tombol: The original uploader was WEwert at English Wikipedia. [GPL or GPL]

Tips berikutnya yaitu hanya dengan memberikan sedikit kode css, tombol yang kaku bisa sedikit di modifikasi. Selain membuat tombol menjadi sedikit lebih hidup. Kustomisasi dengan CSS juga agak ringan karena tidak menambahkan element tambahan apapun. Juga karena kode css tersebut “tertuju” pada selector tombol global (block), maka seluruh tombol yang ada di website juga bisa di buat seragam. Tambahkan kode CSS berikut kotak snippet CSS.

.hentry .entry-content .wp-block-button .wp-block-button__link {
	box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
	-webkit-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.hentry .entry-content .wp-block-button .wp-block-button__link:hover {
	box-shadow:0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Tentu saja anda bisa mengelaborasi sendiri, mau diapakan bentuk tombol yang di inginkan. Tambahkan saja kode CSS yang sesuai dengan tampilan tombol yang di inginkan.

Artikel lainnya