Cara Membuat Hover Pada Button Dengan CSS3

Halo, ketemu lagi dengan saya, kali ini saya akan membuat tutorial mengenai Cara Membuat Hover Pada Button Dengan CSS3, mungkin bagi kalian yang sering mendisain web nama hover sudah tidak asing lagi di dengar, namun saya juga tidak akan pernah bosan untuk berkreasi membuat efek hover, tentunya hover yang akan saya buat lebih menarik. langsung saja simak langkah-langkahnya berikut ini.

Siapkan teks editor terlebih dahulu, kalo sudah silahkan ketikan kode HTML berikut.

<body>
<div id="wrapper">
    <section>
        <div class="btn-container">
            <input type="submit" value="button" id="button-blue"/>
            <div class="ease"></div>
        </div>
    </section>
</div><!-- wrapper -->
</body>

Setelah itu, lanjutkan lagi untuk kode CSS3 berikut untuk memberikan efek hover pada button.

/* Reset Styles */
*{
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
}

body{
	background-color: #0493bd;
}

#wrapper{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* Floats button in the middle */
section{
	margin: 50px 0;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* The button */
#button-blue{
	float:left;
	width: 100%;
	max-width:500px;
	border: white solid 4px;
	cursor: pointer;
	background-color: #0493bd;
	margin-top: -4px;
	color: white;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	letter-spacing: .1em;
	padding-top: 22px;
	padding-bottom: 22px;
	font-weight: 500;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

/* Change text color & background opacity on hover*/
#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}

/* The white hover effect */
.ease {
	width: 0px;
	height: 70px;
	background-color: white;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

/* Make visable when hover */
.btn-container:hover .ease{
	width: 100%;
	max-width: 500px;
	background-color: white;
	border: 0;
}

Kalo sudah semuanya diketikan, coba jalankan di browser masing-masing dan lihat hasilnya. Selesai

Gimana, menarik dan bagus untuk dilihat yah ? Baik sampai disini tutorial mengenai Cara Membuat Hover Pada Button Dengan CSS3, semoga bermanfaat, sampai ketemu dilain waktu.

Selamat mencoba.