Creating a hover effect on a website button using HTML and CSS can be a simple yet effective way to enhance the user experience and make your website more visually appealing. In this tutorial, I will show you step by step how to create a website button that changes its appearance when hovered over, without using any JavaScript.
Step 1: Setting up your HTML structure
First, create a new HTML file in your text editor and add the following code to set up the basic structure of your webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="button">
<a href="#">Button</a>
</div>
</body>
</html>In the code above, we have created a simple HTML structure with a div element containing a link styled as a button. We have also linked our CSS file "styles.css" to style the button.
Step 2: Styling the button using CSS
Next, create a new CSS file in the same directory as your HTML file and add the following code to style the button:
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.button a {
color: inherit;
text-decoration: none;
}
.button:hover {
background-color: #2980b9;
}In the CSS code above, we have styled the button with a blue background color, white text color, padding, and border-radius to make it look like a button. We have also styled the anchor tag inside the button to inherit the text color and remove the underline. Finally, we have added a hover effect to change the background color of the button when it is hovered over.
Step 3: Previewing your button
Save your CSS file as "styles.css" and open your HTML file in a web browser to see the button in action. When you hover over the button, you should see the background color change from light blue to a slightly darker shade of blue.
Congratulations! You have successfully created a website button that changes its appearance when hovered over using HTML and CSS, without using any JavaScript. Feel free to customize the button further by adjusting the styles in the CSS code to suit your website’s design.
