Halo teman-teman, pada kesempatan kali ini saya akan membuat button hover boreder animasi dengan CSS3. Dengan menggunakanborder dan sedikit efek animasinya. Oke kita mulai saja, pertama kita buat folder untuk menampung semua file html dan css kita, saya berinama hover-border. Kemudian coba teman-teman ketikkan html berikut :

<!DOCTYPE html>

<html>

<head>

<title>Hover Border</title>

<link href=”hover.css” rel=”stylesheet” media=”all”>

</head>

<body>

<div id=”effects”>

<a href=”#” class=”button outline-outward”>Outline Outward</a>

</div>

</body>

</html>

Kemudian save dengan nama index.html di dalam folder tadi. Kemudian ketikkan cssnya sebagai berikut :

.button {

margin: .4em;

padding: 1em;

cursor: pointer;

background: #e1e1e1;

text-decoration: none;

color: #666666;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

 

 

.outline-outward {

display: inline-block;

position: relative;

-webkit-transform: translateZ(0);

transform: translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.outline-outward:before {

content: ”;

position: absolute;

border: #e1e1e1 solid 4px;

top: 0;

right: 0;

bottom: 0;

left: 0;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: top, right, bottom, left;

transition-property: top, right, bottom, left;

}

.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {

top: -8px;

right: -8px;

bottom: -8px;

left: -8px;

}

Kemudian save dengan nama hover.css dan coba teman-teman buka di browser.