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

<!DOCTYPE html>

<html lang=”en”>

<head>

<title>Hover Shadow</title>

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

</head>

<body>

<div id=”effects”>

<a href=”#” class=”button float-shadow”>Float Shadow</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);

}

 

 

/* Float */

.float {

display: inline-block;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transform: translateZ(0);

transform: translateZ(0);

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

}

.float:hover, .float:focus, .float:active {

-webkit-transform: translateY(-5px);

transform: translateY(-5px);

}

 

.sink:hover, .sink:focus, .sink:active {

-webkit-transform: translateY(5px);

transform: translateY(5px);

}

 

/* Hang */

@-webkit-keyframes hang {

50% {

-webkit-transform: translateY(3px);

transform: translateY(3px);

}

 

100% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

}

}

 

@keyframes hang {

50% {

-webkit-transform: translateY(3px);

transform: translateY(3px);

}

 

100% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

}

}

 

.hang {

display: inline-block;

-webkit-transition-duration: 0.5s;

transition-duration: 0.5s;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transform: translateZ(0);

transform: translateZ(0);

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

}

.hang:hover, .hang:focus, .hang:active {

-webkit-transform: translateY(6px);

transform: translateY(6px);

-webkit-animation-name: hang;

animation-name: hang;

-webkit-animation-duration: 1.5s;

animation-duration: 1.5s;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

}

 

 

/* Float Shadow */

.float-shadow {

display: inline-block;

position: relative;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transform: translateZ(0);

transform: translateZ(0);

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

}

.float-shadow:before {

pointer-events: none;

position: absolute;

z-index: -1;

content: ”;

top: 100%;

left: 5%;

height: 10px;

width: 90%;

opacity: 0;

background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

/* W3C */

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform, opacity;

transition-property: transform, opacity;

}

.float-shadow:hover, .float-shadow:focus, .float-shadow:active {

-webkit-transform: translateY(-5px);

transform: translateY(-5px);

/* move the element up by 5px */

}

.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {

opacity: 1;

-webkit-transform: translateY(5px);

transform: translateY(5px);

/* move the element down by 5px (it will stay in place because it’s attached to the element that also moves up 5px) */

}

 

/* Hover Shadow */

@-webkit-keyframes hover {

50% {

-webkit-transform: translateY(-3px);

transform: translateY(-3px);

}

 

100% {

-webkit-transform: translateY(-6px);

transform: translateY(-6px);

}

}

 

@keyframes hover {

50% {

-webkit-transform: translateY(-3px);

transform: translateY(-3px);

}

 

100% {

-webkit-transform: translateY(-6px);

transform: translateY(-6px);

}

}

 

@-webkit-keyframes hover-shadow {

0% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

 

50% {

-webkit-transform: translateY(3px);

transform: translateY(3px);

opacity: 1;

}

 

100% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

}

 

@keyframes hover-shadow {

0% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

 

50% {

-webkit-transform: translateY(3px);

transform: translateY(3px);

opacity: 1;

}

 

100% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

}

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