This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will be change on hover. The button has background color with no border radius and the background color will be change on hover.
HTML and CSS code for Stylish 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-color: #3498db; /* Button background color */
color: white; /* Text color */
padding: 10px 20px; /* Button padding */
border: 3px solid #2c3e50; /* Bold border */
text-transform: uppercase; /* Uppercase text */
font-size: 16px; /* Font size */
cursor: pointer; /* Pointer cursor on hover */
transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for hover effects */
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: 0; /* No border radius */
}
.modern-button:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Box shadow on hover */
background-color: #2980b9; /* Background color on hover */
border-color: #1abc9c; /* Border color on hover */
}
</style>
<title>Modern Button</title>
</head>
<body>
<button class="modern-button">Click Me</button>
</body>
</html>
Use this modern and stylish HTML and CSS button on your web forms.
Tags
- Modern CSS Button
- Stylish Button Hover Effects
- CSS Button Design
- Custom Button with Box-Shadow
- Button Border Color Hover Effect
Tags:
HTML
HTML Button