CSS3 Gradient Menu Buttons

-->

View HTML

Tombol-tombol Menu Gradient ini terlihat menarik terlihat seperti tombol yang terbuat dari gambar, Namun sebenarnya hanya menggunakan kode CSS3.
Untuk Lebih jelasnya Lihat Demonya dibawah dan Bagi Sobat Yang mau memasangnya Silahkan Pilih ada beberapa pilihan Warna

Cara pemasanganya sebagai berikut

Masuk ke Blog Sobat

Klik Rancangan pilih tambah Gadget HTML/Javascript

Copy kode CSS nya Rubah nama menunya dan Alamat URLnya

Biar Tambah Cantik Utak-atik Pada Font teksnya juga Kode Warnanya

Untuk membuat miring kekiri saat dicursor Rubah kode (5deg) menjadi (-5deg)

Lalu simpan dan letakan dibagian atas Blog Sobat atau diatas genteng rumah Sobat hehehe...bercanda Sob =))

Home

Kode CSS nya

<style type="text/css">
/* =======================
Salam hangat & happy Blogging
======================= */
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
-moz-border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.gradientbuttons ul a:hover {
background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC;
}</style>
<div class="gradientbuttons">
<ul>
<li><a href="http://blogsobat.com/">Home</a></li>
<li><a href="http://blogsobat.com/">Game</a></li>
<li><a href="http://blogsobat.com/">Facebook</a></li>
<li><a href="http://blogsobat.com/">Tips</a></li>
<li><a href="http://blogsobat.com/">Chat Box</a></li>
<li><a href="http://blogsobat.com/">Forums</a></li>
</ul>
</div>

Kode CSS nya

<style type="text/css">
/* ===================
Salam hangat & happy Blogging ====================*/
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}
.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

.gradientbuttons ul a:hover {
background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC;
}
</style>
<div class="gradientbuttons orangetheme">
<ul>
<li><a href="http://blogsobat.com/">Home</a></li>
<li><a href="http://blogsobat.com/">Game</a></li>
<li><a href="http://blogsobat.com/">Facebook</a></li>
<li><a href="http://blogsobat.com/">Tips</a></li>
<li><a href="http://blogsobat.com/">Chat Box</a></li>
<li><a href="http://blogsobat.com/">Forums</a></li>
</ul>
</div>

Kode CSS nya

<style type="text/css">
/* ======================
Salam hangat & happy Blogging =======================*/
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}
.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.gradientbuttons ul a:hover {
background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC;
}</style>
<div class="gradientbuttons orangetheme redtheme">
<ul>
<li><a href="http://blogsobat.com/">Home</a></li>
<li><a href="http://blogsobat.com/">Game</a></li>
<li><a href="http://blogsobat.com/">Facebook</a></li>
<li><a href="http://blogsobat.com/">Tips</a></li>
<li><a href="http://blogsobat.com/">Chat Box</a></li>
<li><a href="http://blogsobat.com/">Forums</a></li>
</ul>
</div>

Kode CSS nya

<style type="text/css">
/* ======================
Salam hangat & happy Blogging ====================== */
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.gradientbuttons ul a:hover {
background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC;
}</style>

<div class="gradientbuttons greentheme">
<ul>
<li><a href="http://blogsobat.com/">Home</a></li>
<li><a href="http://blogsobat.com/">Game</a></li>
<li><a href="http://blogsobat.com/">Facebook</a></li>
<li><a href="http://blogsobat.com/">Tips</a></li>
<li><a href="http://blogsobat.com/">Chat Box</a></li>
<li><a href="http://blogsobat.com/">Forums</a></li>
</ul>
</div>

Kodenya CSS nya

<style type="text/css">
/* ======================
Salam hangat & happy Blogging ====================== */
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.gradientbuttons ul a:hover {
background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC;
}</style>

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="http://blogsobat.com/">Home</a></li>
<li><a href="http://blogsobat.com/">Game</a></li>
<li><a href="http://blogsobat.com/">Facebook</a></li>
<li><a href="http://blogsobat.com/">Tips</a></li>
<li><a href="http://blogsobat.com/">Chat Box</a></li>
<li><a href="http://blogsobat.com/">Forums</a></li>
</ul>
</div>

Selamat Mencoba Semoga bermanfaat
Narasumber : http://www.dynamicdrive.com/

Posted On : 27 Oktober 2011 Time : 15.36

| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |