Cara Membuat Animated Arrow Hover dengan HTML CSS
Banyak orang yang gagal tak sadar betapa dekatnya mereka dengan kesuksesan ketika mereka menyerah. Halo semuanya, apa kabar? Terbaik dan nomor satu nya ya pasti. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Animated Arrow Hover dengan HTML CSS.
Banyak macam-macam variasi button hover, dapat kita gunakan menggunakan jQuery dan HTML CSS. Nah kali ini saya akan memberitahukan kepada kalian Cara Membangun Animated Arrow Hover dengan HTML CSS. Berikut caranya:
Pertama-tama-tama siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML berikut.
<body>
<h2>Arahkan kursor ke button</h2>
<button class=button><span>Hover </span></button>
</body>
Setelah itu, CSS nya seperti ini.
.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: '»';
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;
}Bagaimana teman-teman? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai Cara Membangun Animated Arrow Hover dengan HTML CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
