Tombol Button Animasi Menggunakan HTML

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg
October 28, 2017





Selamat siang sobat blogger kali ini kami akan share bagaimana membuat tombol button animasi menggunakan HTML. Kemarin kami juga sempat membahas Bagaimana cara membuat card Profile menggunakan HTML dan CSS.

Read More:

Langsung saja kami akan membagikan bagaimana cara membuat Button yang keren dibawah ini.

1. Pressed Button
<!DOCTYPE html>
<html>
<head>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>
<h2>Pressed Effect</h2>
<button class="button">Click Me</button>
</body>
</html>
2. Animated Button
<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>
3. Ripple Effect Button

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>
<h2>Ripple Effect</h2>
<button class="button">Click Me</button>
</body>
</html>
Sekian share kali ini semoga apa yang kami share bermanfaat bagi teman-teman semua, Jangan lupa share keteman kalian juga.

Referensi Tutorials : www.w3schools.com


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed