Here are 20 examples of different types of buttons in HTML
<!DOCTYPE html>
<html>
<head>
<title>Button Examples</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.primary-btn {
background-color: #007bff;
color: #fff;
}
.rounded-btn {
border-radius: 50px;
}
.hover-btn:hover {
background-color: #ffc107;
color: #fff;
}
.toggle-btn {
background-color: #28a745;
color: #fff;
}
.toggle-btn.active {
background-color: #dc3545;
}
.ghost-btn {
border: 2px solid #007bff;
background-color: transparent;
color: #007bff;
}
.gradient-btn {
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: #fff;
}
.border-btn {
border: 2px solid #007bff;
background-color: #fff;
color: #007bff;
}
.loading-btn {
position: relative;
}
.loading-btn .fa-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fab {
background-color: #007bff;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
text-decoration: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.fab:hover {
background-color: #ffc107;
}
</style>
</head>
<body>
<button>Click Me</button>
<button id="myButton">Submit</button>
<button class="primary-btn">Save</button>
<button style="background-color: red; color: white;">Delete</button>
<button disabled>Disabled</button>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="image" src="button-image.png" alt="Submit">
<button><i class="fa fa-star"></i> Like</button>
<a href="https://example.com" class="btn">Go to Example</a>
<button onclick="return confirm('Are you sure?')">Delete</button>
<button title="Save Changes">Save</button>
<button class="rounded-btn">Click Me</button>
<button class="hover-btn">Hover Me</button>
<button class="toggle-btn" onclick="this.classList.toggle('active')">Toggle</button>
<button class="ghost-btn">Submit</button>
<button class="gradient-btn">Click Me</button>
<button class="border-btn">Click Me</button>
<button class="loading-btn">Save <i class="fa fa-spinner fa-spin"></i></button>
<a href="#" class="fab"><i class="fa fa-plus"></i></a>
</body>
</html>
