Jumat, 15 Maret 2013

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!aqua-theme-buttonEfek 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 :)

Tidak ada komentar:

Posting Komentar