<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Various Button Styles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Basic Button -->
<a href="#" class="btn basic">Basic Button</a>
<!-- Rounded Button -->
<a href="#" class="btn rounded">Rounded Button</a>
<!-- Outline Button -->
<a href="#" class="btn outline">Outline Button</a>
<!-- Button with Shadow -->
<a href="#" class="btn shadow">Button with Shadow</a>
<!-- Icon Button -->
<a href="#" class="btn icon-button"><span class="icon">★</span> Icon Button</a>
<!-- Button with Gradient -->
<a href="#" class="btn gradient">Gradient Button</a>
<!-- Button with Hover Effect -->
<a href="#" class="btn hover-effect">Hover Effect Button</a>
</body>
</html>
Css
/* General Button Styling */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: white;
text-decoration: none;
margin: 10px;
transition: all 0.3s ease;
border-radius: 5px;
/* Basic Button */
.basic {
background-color: #3498db;
/* Rounded Button */
.rounded {
background-color: #2ecc71;
border-radius: 50px;
/* Outline Button */
.outline {
color: #3498db;
background-color: transparent;
border: 2px solid #3498db;
.outline:hover {
background-color: #3498db;
color: white;
/* Button with Shadow */
.shadow {
background-color: #e74c3c;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
.shadow:hover {
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
/* Icon Button */
.icon-button {
background-color: #9b59b6;
display: flex;
align-items: center;
justify-content: center;
.icon-button .icon {
margin-right: 8px;
/* Gradient Button */
.gradient {
background: linear-gradient(45deg, #ff6b6b, #f0e130);
}
.gradient:hover {
background: linear-gradient(45deg, #f0e130, #ff6b6b);
/* Button with Hover Effect */
.hover-effect {
background-color: #e67e22;
.hover-effect:hover {
background-color: #d35400;
transform: scale(1.05);
Penjelasan
• Basic Button: Tampilan dasar dengan warna biru.
• Rounded Button: Tombol dengan sudut bulat (oval).
• Outline Button: Tombol transparan dengan border yang berubah warna saat di-hover.
• Button with Shadow: Tombol dengan efek bayangan yang mempertegas tampilan.
• Icon Button: Tombol yang dilengkapi ikon, cocok untuk tombol dengan visual yang menarik.
• Gradient Button: Tombol dengan latar gradasi yang berganti arah saat di-hover.
• Hover Effect Button: Tombol yang sedikit membesar saat di-hover untuk memberi efek
interaktif.
