Cara Membuat 3D Button Hover dengan CSS3

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat 3D Button Hover dengan CSS3. Sebelumnya sudah banyak yah teman-teman tentang button hover yang keren keren kalau teman-teman sering mencari di google. Namun untuk kali ini saya mencoba membuat 3D button hover yang tidak kalah kerennya dengan yang lain.

Oke langsung saja kita mulai, pertama-tama buat foldernya terlebih dahulu. Lalu kemudian jalankan/run text-editor yang teman-teman gunakan, dan disini saya menggunakan sublime-text. Kemudian ketik/copy script HTML dibawah ini ya teman-teman :

<!DOCTYPE html>
<html>
<head>
	<title>3D Button Hover</title>
</head>
<body>
<div class="container">
    <div class="button btn">
     3D Button
    </div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>3D Button Hover</title>

</head>

<body>

3D Button

</div>

</body>

</html>

Jika sudah dengan HTMLnya silahkan teman-teman simpan, dan selanjutnya teman-teman ketik/copy kembali script CSS dibawah ini dan teman-teman letakan diantara tag head pada HTML (internal css) :

<style type="text/css">
.container{
	width:200px; 
	height:85px;
	margin:50px auto;
  }
.button{
	width:200px;
	height:80px;
	line-height:80px;
	text-align:center;
	font-size:35px;
	color:white; 
}
.btn{
	background:#229807;
	border-bottom:solid 5px #1a6d06;
	border-radius:5px;  
}


.button:hover{
	position:relative;
	top:5px;
	left:5px;
	border-bottom:none;
	width:190px;
	cursor:pointer;
}

.btn:hover{
  background: linear-gradient(#269c0b,#27b306); /* Standard */  
}
</style>

.container{

width:200px;

height:85px;

margin:50px auto;

}

.button{

width:200px;

height:80px;

line-height:80px;

text-align:center;

font-size:35px;

color:white;

}

.btn{

background:#229807;

border-bottom:solid 5px #1a6d06;

border-radius:5px;

}

.button:hover{

position:relative;

top:5px;

left:5px;

border-bottom:none;

width:190px;

cursor:pointer;

}

.btn:hover{

background: linear-gradient(#269c0b,#27b306); /* Standard */

}

</style>

Jika sudah HTML dan CSSnya, langkah selanjutnya teman-teman tinggal menjalankan/run dibrowser yang teman-teman gunakan. Jika berhasil/sesuai maka hasilnya akan sama seperti pada gambar dibawah ini :

Cukup mudah kan teman-teman ? jadi seperti itulah Cara Membuat 3D Button Hover dengan CSS3. Silahkan teman-teman modifikasi sesuai kreativitas yang teman-teman miliki dan sesuai selera teman-teman.

Oke kalau begitu cukup sampai disini dulu pembahasan kali ini tentang Cara Membuat 3D Button Hover dengan CSS3. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu di pembahasan selanjutnya.

Terimakasih

Facebook DUMET School

Categories