Butonlar web sitelerinin vazgeçilmezleridir. Bu yüzden kaliteli tasarımlar oluşturmak için yaratıcı efektler ve görsellerden yararlanmak gerekiyor. Bu yazımda sizler için buton efekt(hover)leri örnekleri paylaştım. Tamamen CSS kullanarak yapılmış olan bu efektleri uygulamak ve düzenlemek çok kolay. Hatta size ilham kaynağı olabiliceği görüşündeyim.

Uygulamaya Başlayalım

İlk olarak göstermek, uygulamak istediğimiz yere ekleyip veya düzenlememizi aşağıdaki gibi yapıyoruz.

<button class="button button--ujarak">Vote</button>

Daha sonra ise CSS dosyamıza aşağıdaki efektimize ait kodları ekliyoruz.

.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
}

.button:focus {
	outline: none;
}

.button > span {
	vertical-align: middle;
}

Eğer butonun border, radius, height, width gibi değerlerini de düzenlemek isterseniz aşağıdaki kodlarıda kendi isteğinize göre css dosyanıza eklemede bulunabilirsiniz.

/* Sizes */
.button--size-s {
	font-size: 14px;
}

.button--size-m {
	font-size: 16px;
}

.button--size-l {
	font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}

.button--text-thin {
	font-weight: 300;
}

.button--text-medium {
	font-weight: 500;
}

.button--text-thick {
	font-weight: 600;
}

.button--round-s {
	border-radius: 5px;
}

.button--round-m {
	border-radius: 15px;
}

.button--round-l {
	border-radius: 40px;
}

/* Borders */
.button--border-thin {
	border: 1px solid;
}

.button--border-medium {
	border: 2px solid;
}

.button--border-thick {
	border: 3px solid;
}

Butonların efektlerinin örneklerine buradan erişebilirsiniz. Kaynak dosyasını ise buradan indirebilirsiniz.

Unutmadan hatırlatayım ki bazı tarayıcılar efektleri desteklemeyebiliyor.