Tutorial Website Praktis: Mudahnya Membuat Button Link Stylish dengan Bantuan ChatGPT!
Banyak yang kesulitan membuat button link yang menarik dan responsif, terutama agar tampil optimal di mobile phone. Tutorial ini akan membantu Anda mengatasi tantangan tersebut dengan cara yang mudah dan praktis.
Dalam pembuatan website undangan, ChatGPT bisa menjadi asisten andal untuk menciptakan elemen-elemen stylish seperti button link yang profesional dan estetik. Lihat bagaimana AI ini memudahkan desain web Anda agar terlihat lebih menarik dan fungsional!
Trik Pakai ChatGPT: Bikin Button Link Keren & Responsif!
—
Untuk code htmlnya, silahkan bisa gunakan kode dibawah ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Promo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.promo-button {
display: inline-flex;
align-items: center;
background-color: #FFC525;
color: #5A1E99;
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 16px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.promo-button .button-text {
margin-right: 10px;
}
.promo-button .button-icon {
background-color: #fff;
color: #5A1E99;
border-radius: 50%;
padding: 8px;
font-size: 16px;
}
.promo-button:hover {
background-color: #5A1E99; /* Warna background saat hover */
color: #FFC525; /* Warna teks saat hover */
}
.promo-button:hover .button-icon {
color: #FFC525; /* Warna ikon saat hover */
}
/* Sembunyikan teks pada mode mobile */
@media (max-width: 600px) {
.promo-button .button-text {
display: none;
}
}
</style>
</head>
<body>
<a href="https://weddingpress.co.id/promo" class="promo-button" target="_blank">
<span class="button-text">Promo</span>
<i class="fa-solid fa-cart-shopping button-icon"></i>
</a>
</body>
</html>
Semoga bermanfaat dan jika ada kesulitan atau request tutorial lainnya, bisa tinggalkan komentar anda ya..
