Posted by 
Hai teman-teman, balik lagi bareng gw. Dan pada artikel kali ini gw mau ngeshare cara membuat button/tombol keren di blog dengan animasi hover. Untuk demonya bisa kalian lihat dibawah. Tombol ini bisa kalian gunakan sebagai tombol Demo, Download atau bisa juga sebagai tombol baca selengkapnya. Yuk cekidot ke tutorialnya.
Untuk demo nya kamu bisa lihat di bawah.
Sekian artikel kali ini, semoga bermanfaat. Jika ada pertanyaan silahkan tanyakan di komentar di bawah, jangan lupa tingggalkan like share dan komentar! Thanks!
- Pertama, buka blog kamu kemudian masuk ke menu Tema - Edit HTML
- Cari tag ]]></b:skin> atau </style> kemudian pastekan kode ini tepat di atasnya
- Setelah itu silahkan kamu pilih SAVE
- Untuk memakainya, kamu tinggal pastekan kode di bawah pada mode HTML
/* Button Learn More Aditya Januardi */
.container-learnmore {
display: flex;
align-items: center;
justify-content: space-evenly;
grid-area: main;
align-self: center;
justify-self: center;
padding: 25px 0 25px 0;
}
.learn-more {
width: 12rem;
height: auto;
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: #fff;
padding: 0;
}
.learn-more:hover {
background: #fff;
}
.circle {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
.icon {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: absolute;
bottom: 0;
top: 0;
margin: auto;
background: #fff;
}
.arrow {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.arrow:before {
position: absolute;
content: '';
top: -0.30rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
.button-text {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: absolute;
top: 0;
right:0;
left: 0;
bottom: 0;
color: #111;
font-weight: 700;
margin: 0 0 0 1.85rem;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
padding: 0.75rem 0;
font-size: 1rem;
}
.learn-more:hover .circle {
width: 100%;
}
.learn-more:hover .icon.arrow{
background: #fff;
transform: translate(1rem,0)
}
.learn-more:hover .button-text {
color: #fff;
}
<div class="container-learnmore">
<button class="learn-more">
<a href="LINK TOMBOL KAMU" target="blank">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span></span>
<span class="button-text">VIEW DEMO</span></a>
</button>
</div>
Silahkan ganti LINK TOMBOL KAMU dan VIEW DEMO sesuai dengan preferensi kamu masing-masing.
Jika kamu ingin agar tombolnya ada dua, kamu tinggal tambahkan kode ini sebelum tag </div>
<button class="learn-more">
<a href="LINK TOMBOL KAMU" target="blank">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span></span>
<span class="button-text">DOWNLOAD</span></a>
</button>
Untuk demo nya kamu bisa lihat di bawah.
