Button CSS3 Hover Cool Biasanya sebuah ataupun beberapa tombol (button) yang terdapat di blog dan website, bisa menjadikan template nya ter...
Button CSS3 Hover Cool
Biasanya sebuah ataupun beberapa tombol (button) yang terdapat di blog dan website, bisa menjadikan template nya terlihat lebih padat dan berwarna. Dan umumnya.. tombol-tombol tersebut dimaksudkan untuk menggantikan peran dari entitas link, gambar, widget, dan sebagainya agar lebih tampak menarik. Kerap kali tombol di sebuah halaman sering juga ditampilkan sebagai menu navigasi tambahan. Baiklah, berikut ini akan saya uraikan bagaimana cara membuat animasi pada tombol dengan menggunakan CSS3 transitions dan CSS3 transforms. Disini kita juga akan membubuhi beberapa ikon ke dalamnya untuk menghidupkan dan memperkuat karakter dari tombol-tombol itu sendiri.
Go to Blogger Dashboard > Template
Backup your Template before making any changes to your blog
Click on Edit HTML
Tick Expand Widget Templates
Press Ctrl + F and search the code shown below â–¼ diatas nya mksd nya
Button CSS
]]></b:skin>
Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)
.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtiRV9RlRvyRSUMS1ZOoc4NWdlKupq5JlxmAWh17Znze4FjRrfzNvgwN8msNq6b7CVV6Nlr9QA1ZqeAuzeZ5bl1uWgsecvReDhvb8F81KSly7eZzWGFzMxScrAM15vXS3f4IGgcHJMMU/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}
Code CSS Diatas Itu Untuk Code Hias Nya
Save your template. Use the following â–¼ HTML code snippet to add this button to your blog/blog post.
Code untuk memanggil itu kita punya CSS3 Button .
Button HTML Code
<a href="YOUR LINK " class="hb-buttons">Button name</a>
