Make Buttons With High Technique Coded

Perhiasan dari tampilan hyperlink (URL) agar terlihat lebih menarik yaitu dengan menambahkan bumbu properti CSS. Sering kita melihat penampilan button di berbagi site begitu indah dan menawan. Yang sering kita lihat dan tidak asing mungkin tombol-tombol yang ada pada bagian dashdboard blogger! Contoh tampilan style CSS button/tombol blogger

View blog

Web developer resource keren tentang pembuatan button sangatlah banyak dan menakjubkan. Ex: css3 animated bubble buttons. Artikel dari site tutorialzine merupakan salah satu contoh tombol unik dengan efek gelembung² :)
Jika sobat kepengen melihat-lihat resource mantap punya tentang berbagai tutorial pembuatan button/tombol, berikut listnya

Create Striking Button in CSS3 Using Tutorials
• www.tutoriallounge.com/2012/10/create-striking-button-in-css3-using-tutorials
30 Examples of CSS3 Buttons Tutorials
• smashinghub.com/30-examples-of-css3-buttons-tutorials.htm
CSS and CSS3 buttons, 110 best sets!
• www.webdesignshock.com/css-button

Dari sekian banyak artikel tut's mengenai tombol ini, Koben menaruh perhatian lebih pada tombol dengan tema aqua! Yang dimaksud dengan AQUA theme disini yaitu menampilkan efek terang seperti ada airnya ;)) Perhatikan screenshot, fokus pada gambar tanda panah berwarna merah!Efek mengkilat-kilat layaknya air/kaca/ terang ngageunclang bagaikan batu mutiara :d

DEMO

YOUR TITLE 1

YOUR TITLE 2

Terlihat ada efek aqua kan (efek bubble di area button) Sobat bisa baca tutorialnya di GirlieMac! Blog

.tombol {
width: 120px;
height: 24px;
padding: 5px 15px 3px;
display: inline-block;
-webkit-border-radius: 17px;
border-radius: 17px;
margin: 1em 0;
position: relative;
font-family: Lucida Sans, Helvetica, Verdana, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 1px 2px 2px rgba(10, 10, 10, 0.5);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tombol .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 17px;
border-radius: 17px;
height: 0;
width: 140px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);
}
.aquas {
background-color: #3C84C6;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
background-image: linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
border: 2px solid #768fa5;
}
.aquas:hover {
box-shadow: #3C84C6 0px 0px 5px;
text-shadow: #fff 0px 0px 3px;
cursor: pointer;
}
.orange {
background-color: #ee5526;
background-image: -webkit-gradient(linear, 0% 0%, 0% 85%, from(rgba(246, 132, 36, 0.8)), to(rgba(239, 97, 49, 0.9)));
background-image: linear-gradient(rgba(246, 132, 36, 0.8) 0%, rgba(239, 97, 49, 0.9) 85%);
border: 2px solid #f6a460;
}
.orange:hover {
box-shadow: #ee5526 0px 0px 5px;
text-shadow: #fff 0px 0px 3px;
cursor: pointer;
}
.aquas:active, .orange:active {
bottom: -1px;
}

<div class="tombol aquas">
<div class="glare"></div>
YOUR TITLE 1
</div>

<div class="tombol orange">
<div class="glare"></div>
YOUR TITLE 2
</div>Jika tutorial diatas sedikit ribet, ada satu alternatif lain yang sedikit simple namun ragam lebih ranca' bana' :p
DEMO
Black AquaRed AquaBlue AquaGreen Aqua

Bisa di baca CSSplay CSS3 Buttons

.hideung {
background: #000;
border: 4px solid #000;
}
.beureum {
background: #c00;
border: 4px solid #c00;
}
.bulao {
background: #00a;
border: 4px solid #00a;
}
.hejo {
background: #080;
border: 4px solid #080;
}
.aqua {
display: inline-block;
line-height: 32px;
color: #fff;
width: 100px;
text-align: center;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
text-decoration: none;
padding: 0 10px;
margin-left: 5px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 10px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}
.aqua:active {
-webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
-o-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
-ms-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
}

<a class="aqua hideung" href="" title="">YOUR TITLE 1</a>
<a class="aqua beureum" href="" title="">YOUR TITLE 2</a>
<a class="aqua bulao" href="" title="">YOUR TITLE 3</a>
<a class="aqua hejo" href="" title="">YOUR TITLE 4</a>Other ways to get the aqua button effect please visit Dynamic Drive CSS
Wassalam :)