Google+ Tarzında Buton Yapalım

Google Plus sayfamda gezerken Google’nin tasarım konusunda ne kadar başarılı olduğunu anladım.Özellikle butonlar çok hoşuma gitti ve bizde kendi sitemizde kullanmamız gerektiğini düşündüm, şuan siteme entegreli ve oldukça da iyi durduğunu düşünüyorum.Sizlere ayrıntılı kullanım şeklini anlatacağım ama isterseniz kodlarla oynama yapılarak daha hoş hale getirebilirsiniz.Butonlar çok amaçlıdır kafanıza göre kullanabilirsiniz, ben ‘hakkımda’ sayfamda ve indirme butonu olarak kullanıyorum yayımladığım makalelere göre bu değişebilir.
Kodlarımıza geçmeden bir kaç örnek göstermek istiyorum 4 farklı buton yapacağız buyurun örneklerimiz;
Demolar
Peki bu butonları nasıl kullanacağız ?
İstediğiniz yerde aşağıdaki kodlar dan kendimize göre düzenleyip ekleyeceğiz;

<button class="action green"><span class="label">Örnek bir</span></button>
<button class="action blue"><span class="label">Örnek iki</span></button>
<button class="action red"><span class="label">Örnek üç</span></button>
<button class="action"><span class="label">bu da dört</span></button>

Yukarıdaki kodları eklemeden önce css dosyamızı açıp aşağıdaki kodları ekliyoruz.

/*------------------------------------*\
	$BUTTON
\*------------------------------------*/
button, 
.button {
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
 
	font: bold 11px Helvetica, Arial, sans-serif;
	color: #444;
	line-height: 17px;
	height: 18px;
 
	display: inline-block;
	float: left;
 
	margin: 5px;
	padding: 5px 6px 4px 6px;
 
	background: #F3F3F3;
	border: solid 1px #D9D9D9;
 
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
 
	-webkit-transition: border-color .20s;
	-moz-transition: border-color .20s;
	-o-transition: border-color .20s;
	transition: border-color .20s;
}
button {
	height: 29px !important;
	cursor: pointer;
}
 
button.left, 
.button.left {
	margin: 5px 0 5px 5px;
 
	border-top-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	-moz-border-radius-topright: 0;
 
	border-bottom-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomright: 0;
}
button.middle, 
.button.middle {
	margin: 5px 0;
 
	border-left-color: #F4F4F4;
 
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
button.right, 
.button.right {
	margin: 5px 5px 5px 0;
 
	border-left-color: #F4F4F4;
 
	border-top-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius-topleft: 0;
 
	border-bottom-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomleft: 0;
}
 
button:hover, 
.button:hover {
    background: #F4F4F4;
		border-color: #C0C0C0;
		color: #333;
}
 
button:active, 
.button:active {
	border-color: #4D90FE;
	color: #4D90FE;
 
	-moz-box-shadow:inset 0 0 10px #D4D4D4;
	-webkit-box-shadow:inset 0 0 10px #D4D4D4;
	box-shadow:inset 0 0 10px #D4D4D4;
}
 
button.on, 
.button.on {
	border-color: #BBB;
 
	-moz-box-shadow:inset 0 0 10px #D4D4D4;
	-webkit-box-shadow:inset 0 0 10px #D4D4D4;
	box-shadow:inset 0 0 10px #D4D4D4;
}
button.on:hover, 
.button.on:hover {
	border-color: #BBB;
 
	-moz-box-shadow:inset 0 0 10px #D4D4D4;
	-webkit-box-shadow:inset 0 0 10px #D4D4D4;
	box-shadow:inset 0 0 10px #D4D4D4;
}
button.on:active, 
.button.on:active {
	border-color: #4D90FE;
}
 
button.action, 
.button.action {
	border: 1px solid #D8D8D8 !important;
 
	background: #F2F2F2;
	background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
	background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
	background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
	background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
 
	-webkit-transition: border .20s;
	-moz-transition: border .20s;
	-o-transition: border .20s;
	transition: border .20s;
}
button.action:hover, 
.button.action:hover {
	border: 1px solid #C6C6C6 !important;
 
	background: #F3F3F3;
	background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
	background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
	background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
	background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);
}
button.blue, 
.button.blue {
	border: 1px solid #3079ED !important;
 
	background: #4B8DF8;
	background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
	background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
	background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
	background: -o-linear-gradient(top, #4C8FFD, #4787ED);
 
	-webkit-transition: border .20s;
	-moz-transition: border .20s;
	-o-transition: border .20s;
	transition: border .20s;
}
button.blue:hover, 
.button.blue:hover {
	border: 1px solid #2F5BB7 !important;
 
	background: #3F83F1;
	background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
	background: -moz-linear-gradient(top, #4D90FE, #357AE8);
	background: -ms-linear-gradient(top, #4D90FE, #357AE8);
	background: -o-linear-gradient(top, #4D90FE, #357AE8);
}
button.green, 
.button.green {
	border: 1px solid #29691D !important;
 
	background: #3A8E00;
	background: -webkit-linear-gradient(top, #3C9300, #398A00);
	background: -moz-linear-gradient(top, #3C9300, #398A00);
	background: -ms-linear-gradient(top, #3C9300, #398A00);
	background: -o-linear-gradient(top, #3C9300, #398A00);
 
	-webkit-transition: border .20s;
	-moz-transition: border .20s;
	-o-transition: border .20s;
	transition: border .20s;
}
button.green:hover, 
.button.green:hover {
	border: 1px solid #2D6200 !important;
 
	background: #3F83F1;
	background: -webkit-linear-gradient(top, #3C9300, #368200);
	background: -moz-linear-gradient(top, #3C9300, #368200);
	background: -ms-linear-gradient(top, #3C9300, #368200);
	background: -o-linear-gradient(top, #3C9300, #368200);
}
button.red, 
.button.red {
	border: 1px solid #D14836 !important;
 
	background: #D64937;
	background: -webkit-linear-gradient(top, #DC4A38, #D14836);
	background: -moz-linear-gradient(top, #DC4A38, #D14836);
	background: -ms-linear-gradient(top, #DC4A38, #D14836);
	background: -o-linear-gradient(top, #DC4A38, #D14836);
 
	-webkit-transition: border .20s;
	-moz-transition: border .20s;
	-o-transition: border .20s;
	transition: border .20s;
}
button.red:hover, 
.button.red:hover {
	border: 1px solid #B0281A !important;
 
	background: #D14130;
	background: -webkit-linear-gradient(top, #DC4A38, #C53727);
	background: -moz-linear-gradient(top, #DC4A38, #C53727);
	background: -ms-linear-gradient(top, #DC4A38, #C53727);
	background: -o-linear-gradient(top, #DC4A38, #C53727);
}
 
button.action:hover, 
.button.action:hover {
	-moz-box-shadow: 0 1px 0px #DDD;
	-webkit-box-shadow: 0 1px 0px #DDD;
	box-shadow:iset 0 1px 0px #DDD;
}
button.action:active, 
.button.action:active {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border-color: #C6C6C6 !important;
}
button.blue:active, 
.button.blue:active {
	border-color: #2F5BB7 !important;
}
button.green:active, 
.button.green:active {
	border-color: #2D6200 !important;
}
button.red:active, 
.button.red:active {
	border-color: #B0281A !important;
}
 
 
 
/*------------------------------------*\
	$BUTTON LABEL
\*------------------------------------*/
.ddm span.label, 
button span.label, 
.button span.label {
	display: inline-block !important;
	float: left;
	line-height: 17px;
	height: 18px;
	padding: 0 1px;
	overflow: hidden;
	color: #444;
 
	-webkit-transition: color .20s;
	-moz-transition: color .20s;
	-o-transition: color .20s;
	transition: color .20s;
} 
button span.label {
	line-height: 15px !important;
}
.ddm:active span.label, 
button:active span.label, 
.button:active span.label {
    color: #4D90FE;
}
 
button:hover .label, 
.button:hover .label {
    color: #333;
}
button:hover .label.red, 
.button:hover .label.red {
    color: #DB4A37;
}
button:hover .label.blue, 
.button:hover .label.blue {
    color: #7090C8;
}
button:hover .label.green, 
.button:hover .label.green {
    color: #42B449;
}
button:hover .label.yellow, 
.button:hover .label.yellow {
    color: #F7CB38;
}
 
button.blue .label, 
.button.blue .label {
	color: #FFF !important;
	text-shadow: 0 1px 0 #2F5BB7 !important;
}
button.green .label, 
.button.green .label {
	color: #FFF !important;
	text-shadow: 0 1px 0 #2D6200 !important;
}
button.red .label, 
.button.red .label {
	color: #FFF !important;
	text-shadow: 0 1px 0 #B0281A !important;
}
button.action .label, 
.button.action .label {
	padding: 0 17px !important;
}
 
button.action:active .label, 
.button.action:active .label {
	color: #333 !important;
}
 
button.blue:active .label, 
button.green:active .label, 
button.red:active .label, 
.button.blue:active .label, 
.button.green:active .label, 
.button.red:active .label {
	color: #FFF !important;
}

Kaynak