This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its clean design, rounded corners, and crisp text make it a visually appealing choice for various web applications, ensuring a sleek and interactive user experience.
Code for Modern HTML Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.modern-button {
background: linear-gradient(to right, #3498db, #2ecc71); /* Gradient background */
color: #fff; /* Text color */
padding: 12px 24px; /* Button padding */
border: 2px solid transparent; /* Transparent border */
border-color: #F5FFFA; /* Border color */
text-transform: uppercase; /* Uppercase text */
font-size: 16px; /* Font size */
cursor: pointer; /* Pointer cursor */
transition: all 0.3s ease; /* Smooth transition for all properties */
outline: none; /* Remove outline */
margin: 20px; /* Space around the button */
display: inline-block; /* Inline-block display */
text-align: center; /* Center text */
text-decoration: none; /* Remove underline for links */
border-radius: 4px; /* Rounded corners */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Button shadow */
}
.modern-button:hover {
background: linear-gradient(to right, #2980b9, #27ae60); /* Updated gradient background on hover */
border-color: #fff; /* Border color on hover */
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Enhanced box shadow on hover */
}
</style>
<title>Modern Button</title>
</head>
<body>
<button class="modern-button">Click Me</button>
</body>
</html>