CSS3 Gradient Button

Kali ini saya akan berbagi tips tentang cara membuat button dengan menggunakan kode CSS3 yang sedikit menggunakan efek gradient sehingga tampilannya menjadi lebih menarik. Button dalam bahasa indonesia artinya adalah tombol, dalam blog atau website biasanya digunakan untuk memperindah tampilan tautan atau link.

CSS3 Gradient Button

Lihat Demo

Untuk mengintegrasikan pada blog caranya relatif mudah, cukup menambahkan kode CSS, button pun siap difungsikan. Berikut kode CSS-nya.

/* CSS3 Gradient Button
----------------------------------------------- */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
.big, .medium, .small {
	display: block;
	text-align: center;
	font-family: 'Oswald',sans-serif;
	text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);
	color: #ffffff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
a.big, a.medium, a.small {
	text-decoration: none;
	color:#FFFFFF;
}
.big {
	width: 130px;
	height: 30px;
	padding: 17px 10px 10px 10px;
	font-size:24px;
}
.medium {
	width: 80px;
	height: 25px;
	padding: 10px 10px 5px 10px;
	font-size:18px;
}
.small {
	width: 60px;
	height: 20px;
	padding:5px;font-size:12px;
}
.big:active, .medium:active, .small:active {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
	outline: 0 none;
}
/* Red Button
----------------------------------------------- */
.red {
	border:1px solid #622929;
	background: #D55857;
	background: -webkit-gradient(linear, left top, left bottom, from(#D55857), to(#BD4544));
	background: -moz-linear-gradient(top, #D55857,  #BD4544);
	background: linear-gradient(#D55857, #BD4544);
}
.red:hover, .red:active{
	text-decoration:none;
	border-color: #af4949;
	background: #ed7574;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed7574), to(#D55857));
	background: -moz-linear-gradient(top, #ed7574,  #D55857);
	background: linear-gradient(#ed7574, #D55857);
}
/* Green Button
----------------------------------------------- */
.green {
	border:1px solid #4E612B;
	background: #A3CF59;
	background: -webkit-gradient(linear, left top, left bottom, from(#A3CF59), to(#93BC45));
	background: -moz-linear-gradient(top, #A3CF59,  #93BC45);
	background: linear-gradient(#A3CF59, #93BC45);
	}
.green:hover, .green:active {
	text-decoration:none;
	border-color: #8DAF4B;
	background: #C3DC78;
	background: -webkit-gradient(linear, left top, left bottom, from(#C3DC78), to(#A3CF59));
	background: -moz-linear-gradient(top, #C3DC78,  #A3CF59);
	background: linear-gradient(#C3DC78, #A3CF59);
}
/* BlueButton
----------------------------------------------- */
.blue {
	border:1px solid #2C5660;
	background: #5CB6CE;
	background: -webkit-gradient(linear, left top, left bottom, from(#5CB6CE), to(#45A4BA));
	background: -moz-linear-gradient(top, #5CB6CE,  #45A4BA);
	background: linear-gradient(#5CB6CE, #45A4BA);
}

.blue:hover, .blue:active {
	text-decoration:none;
	border-color: #4D9BAD;
	background: #79C9DA;
	background: -webkit-gradient(linear, left top, left bottom, from(#79C9DA), to(#5CB6CE));
	background: -moz-linear-gradient(top, #79C9DA,  #5CB6CE);
	background: linear-gradient(#79C9DA, #5CB6CE);
}
/* Purple Button
----------------------------------------------- */
.purple {
	border:1px solid #60295B;
	background: #B261A7;
	background: -webkit-gradient(linear, left top, left bottom, from(#B261A7), to(#AF4E9D));
	background: -moz-linear-gradient(top, #B261A7,  #AF4E9D);
	background: linear-gradient(#B261A7, #AF4E9D);
}

.purple:hover, .purple:active {
	text-decoration:none;
	border-color: #AD4D9D;
	background: #CC7CB4;
	background: -webkit-gradient(linear, left top, left bottom, from(#CC7CB4), to(#B261A7));
	background: -moz-linear-gradient(top, #CC7CB4,  #B261A7);
	background: linear-gradient(#CC7CB4, #B261A7);
}
/* Mustard Button
----------------------------------------------- */
.mustard {
	border:1px solid #5E5528;
	background: #ACA161;
	background: -webkit-gradient(linear, left top, left bottom, from(#ACA161), to(#AD9D4D));
	background: -moz-linear-gradient(top, #ACA161,  #AD9D4D);
	background: linear-gradient(#ACA161, #AD9D4D);
}

.mustard:hover, .mustard:active {
	text-decoration:none;
	border-color: #AA9A4C;
	background: #CCBE7D;
	background: -webkit-gradient(linear, left top, left bottom, from(#CCBE7D), to(#ACA161));
	background: -moz-linear-gradient(top, #CCBE7D,  #ACA161);
	background: linear-gradient(#CCBE7D, #ACA161);
}

<!-- Red Button -->
<a href="#" class="big green">Read More</a>
<a href="#" class="medium green">Read More</a>
<a href="#" class="small green">Read More</a>

<!-- Blue Button -->
<a href="#" class="big blue">Read More</a>
<a href="#" class="medium blue">Read More</a>
<a href="#" class="small blue">Read More</a>

<!-- Purple Button -->
<a href="#" class="big purple">Read More</a>
<a href="#" class="medium purple">Read More</a>
<a href="#" class="small purple">Read More</a>

<!-- Mustard Button -->
<a href="#" class="big mustard">Read More</a>
<a href="#" class="medium mustard">Read More</a>
<a href="#" class="small mustard">Read More</a>

Lihat Demo

Ganti tanda # dengan url Anda, big, medium, small adalah kelas untuk ukuran button, @font-face pada kode CSS di atas adalah font standard pada button ini, jika Anda ingin menggunakan font lain, Anda cukup menghapus kelas @font-face pada kode CSS di atas

—ς∞ς—

Tweet

Postingan terkait:

Ditulis EM — Friday 10 May 2013 — Add Comment — CSS3