Cara Membuat Efek animasi pada Tombol Button

Cara Membuat Efek animasi pada Tombol Button

Button atau Tombol biasanya digunakan untuk mengajak pengunjung situs Anda untuk melakukan action atau aksi ketika sedang berada di dalamnya, contohnya mengajak pengunjung untuk menekan tombol buy atau beli, tombol subscribe atau berlangganan, dan tombol lainnya.
Nah, berikut ini ada satu tutorial dimana kita akan membuat satu buah efek yakni bagaimana Cara Membuat Efek animasi pada Tombol Button.

Pada sebuah website, tentu efek dan animasi ini sangat bermacam-macam bentuk nya salah satu contoh bentuk efek dan animasi dalam sebuah tampilan website adalah berupa slide, perubahan warna, gambar dan lain sebagainya.

1. Button Style Blue Colour light

HTML Code :

 <!-- partial:index.partial.html -->
<a href="https://anekatorial.blogspot.com" target="_SELF">
<h1> Button Style Anekatorial</h1></a>
<button class="btn third">Button 3</button>

<a href="#" class="btn third">Button 3</a>

<!-- partial --> 

CSS Code :

 .btn {   box-sizing: border-box;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background-color: transparent;   border: 2px solid #e74c3c;   border-radius: 0.6em;   color: #e74c3c;   cursor: pointer;   display: flex;   align-self: center;   font-size: 1rem;   font-weight: 400;   line-height: 1;   margin: 20px;   padding: 1.2em 2.8em;   text-decoration: none;   text-align: center;   text-transform: uppercase;   font-family: 'Montserrat', sans-serif;   font-weight: 700; } .btn:hover, .btn:focus {   color: #fff;   outline: 0; } .third {   border-color: #3498db;   color: #fff;   box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;   transition: all 150ms ease-in-out; } .third:hover {   box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db; } 

2. Button Style Yellow Colour Hover

HTML Code :

 <!-- partial:index.partial.html -->
<a href="https://anekatorial.blogspot.com" target="_SELF">
<h1>Button Style Anekatorial</h1></a>
<button class="btn fourth">Button 4</button>

<a href="#" class="btn fourth">Button 4</a>

<!-- partial --> 

CSS Code :

 .btn {   box-sizing: border-box;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background-color: transparent;   border: 2px solid #e74c3c;   border-radius: 0.6em;   color: #e74c3c;   cursor: pointer;   display: flex;   align-self: center;   font-size: 1rem;   font-weight: 400;   line-height: 1;   margin: 20px;   padding: 1.2em 2.8em;   text-decoration: none;   text-align: center;   text-transform: uppercase;   font-family: 'Montserrat', sans-serif;   font-weight: 700; } .btn:hover, .btn:focus {   color: #fff;   outline: 0; } .fourth {   border-color: #f1c40f;   color: #fff;   background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);   background-position: 100%;   background-size: 400%;   transition: background 300ms ease-in-out; } .fourth:hover {   background-position: 0; } 

3. Button Style dengan garis Berjalan

HTML Code :

 <!-- partial:index.partial.html -->
<a href="https://anekatorial.blogspot.com" target="_SELF">
<h1>Button Style Anekatorial</h1></a>

<button class="btn second">Button 2</button>

<a href="#" class="btn second">Button 2</a>

<!-- partial --> 

CSS Code :

 .btn {   box-sizing: border-box;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background-color: transparent;   border: 2px solid #e74c3c;   border-radius: 0.6em;   color: #e74c3c;   cursor: pointer;   display: flex;   align-self: center;   font-size: 1rem;   font-weight: 400;   line-height: 1;   margin: 20px;   padding: 1.2em 2.8em;   text-decoration: none;   text-align: center;   text-transform: uppercase;   font-family: 'Montserrat', sans-serif;   font-weight: 700; } .btn:hover, .btn:focus {   color: #fff;   outline: 0; } .second {   border-radius: 3em;   border-color: #1abc9c;   color: #fff;   background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);   background-position: 0 0;   background-size: 100%;   transition: background 300ms ease-in-out; } .second:hover {   background-position: 100px; } 

4. Button Style Hover 2

HTML Code :

 <!-- partial:index.partial.html -->
<a href="https://anekatorial.blogspot.com" target="_SELF">
<h1> Button Style Anekatorial</h1></a>
<button class="btn fifth">Button 5</button>

<a href="#" class="btn fifth">Button 5</a>

<!-- partial --> 

CSS Code :

 .btn {   box-sizing: border-box;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background-color: transparent;   border: 2px solid #e74c3c;   border-radius: 0.6em;   color: #e74c3c;   cursor: pointer;   display: flex;   align-self: center;   font-size: 1rem;   font-weight: 400;   line-height: 1;   margin: 20px;   padding: 1.2em 2.8em;   text-decoration: none;   text-align: center;   text-transform: uppercase;   font-family: 'Montserrat', sans-serif;   font-weight: 700; } .btn:hover, .btn:focus {   color: #fff;   outline: 0; } .fifth {   border-color: #8e44ad;   border-radius: 0;   color: #8e44ad;   position: relative;   overflow: hidden;   z-index: 1;   transition: color 150ms ease-in-out; } .fifth:after {   content: '';   position: absolute;   display: block;   top: 0;   left: 50%;   -webkit-transform: translateX(-50%);           transform: translateX(-50%);   width: 0;   height: 100%;   background: #8e44ad;   z-index: -1;   transition: width 150ms ease-in-out; } .fifth:hover {   color: #fff; } .fifth:hover:after {   width: 110%; }