Learn to create engaging web buttons with hover effects using HTML and CSS. Elevate your user interface design with interactive buttons.
Table of Contents
Buttons play a crucial role in web design, offering a gateway for user interaction. In this guide, we'll explore how to create a button with a hover effect using HTML and CSS. These interactive buttons can elevate your website's user interface, making it more engaging and user-friendly.
Let's start making a modern button with hover effects using HTML and CSS step by step.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before we dive into the tutorial, you'll need:
- Basic knowledge of HTML and CSS.
- A code editor (e.g., Visual Studio Code).
- A web browser for testing.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our button.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's an explanation of each part of the code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This opening <html> tag defines the beginning of the HTML document. The lang attribute is set to "en," indicating that the content of the page is in English.
3. <head>: The <head> section contains metadata and information about the web page, such as its title, character set, and links to external resources.
- <title>Modern Button with Hover Effect</title>: This <title> element sets the title of the web page, which typically appears in the browser's title bar or tab.
- <meta charset="UTF-8" />: This <meta> tag specifies the character encoding for the page, which is set to UTF-8, a widely used character encoding that supports a wide range of characters and languages.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This <meta> tag defines the viewport settings for responsive web design. It ensures that the page is displayed properly on various devices by setting the initial zoom level to 1.0 and adjusting the width to match the device's screen width.
- <link rel="stylesheet" href="styles.css" />: This <link> tag links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. It is used to apply styles to the page's content.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer" />: These <link> tags link to external CSS resources. The first one links to the Font Awesome icon library, providing styles for various icons. The integrity, crossorigin, and referrerpolicy attributes are related to security and resource loading policies.
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">: This <link> tag links to a Google Fonts stylesheet, specifically the "Varela Round" font, which can be used to style text on the page.
4. <body>: The <body> section contains the main content of the web page that users will see and interact with.
5. <div class="btn-container">: This <div> element with the class "btn-container" is a container for the two buttons.
6. <button class="btn" id="buy-now">: These <button> elements represent two buttons. They both have the class "btn" for styling purposes, and each has a unique id attribute.
7. <i class="fas fa-shopping-bag btn-icon"></i>: Inside each button, there is an <i> element with classes "fas fa-shopping-bag btn-icon." This is typically used for icons, and it's using Font Awesome classes to display a shopping bag icon.
8. <p class="btn-text">Buy Now</p>: Below each icon, there is a <p> element with the class "btn-text" containing text. In the first button, it says "Buy Now," and on the second button, it says "How To Order."
This is the basic structure of our button using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the button is in place, the next step is to add styling to the button using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our button.
Let me explain each part of the code:
1. * Selector:
- The * selector selects all elements on the page.
- margin: 0; and padding: 0; are used to remove any default margin and padding for all elements. This is often done to achieve consistent spacing and alignment across different browsers.
2. body Selector:
- Styles applied to the <body> element of the webpage.
- padding: 0 8%; adds horizontal padding to the body, making the content area 8% narrower on both sides.
- height: 100vh; sets the height of the body to 100% of the viewport height, ensuring that the webpage takes up the full height of the screen.
- background-color: rgb(29, 29, 29); sets the background color of the body to a dark gray color.
- display: flex; and align-items: center; are used to center the content vertically within the body.
3. button Selector:
- Styles applied to all <button> elements on the page.
- border: none; removes the border from buttons.
- cursor: pointer; sets the cursor to a pointer when hovering over buttons.
- background-color: unset; removes the background color of buttons.
- font-family: 'Varela Round', sans-serif; specifies the font family for buttons.
4. .btn-container Selector:
- Styles applied to an element with the class "btn-container."
- width: 100%; makes the container take up the full width of its parent.
- max-width: 400px; sets the maximum width of the container to 400 pixels.
- margin: auto; centers the container horizontally.
- display: flex; and flex-wrap: wrap; create a flex container that wraps its children to the next line if they don't fit horizontally.
- gap: 20px; adds a 20-pixel gap between the children.
5. .btn Selector:
- Styles applied to elements with the class "btn."
- height: 52px; sets the height of the buttons to 52 pixels.
- border-radius: 30px; adds rounded corners to the buttons.
- font-size: 16px; sets the font size for button text.
- display: flex; justify-content: flex-start; align-items: center; aligns the content of the buttons to the left and centers vertically.
- gap: 10px; adds a 10-pixel gap between elements within the buttons.
6. #buy-now and #how-to-order Selectors:
- Styles applied to elements with the IDs "buy-now" and "how-to-order."
- These styles specify the width, minimum width, and background colors for these specific buttons.
7. .btn-container .btn-icon Selector:
- Styles applied to elements with the class "btn-icon" that are descendants of elements with the class "btn-container."
- These styles define the appearance of icon elements within the buttons.
8. .fa-shopping-bag and .fa-play Selectors:
- Styles applied to elements with the classes "fa-shopping-bag" and "fa-play."
- These styles set the width and colors of these specific icons.
9. .btn:hover .btn-icon Selector:
- Styles applied to the ".btn-icon" elements when their parent ".btn" is being hovered over.
- This style is used to change the width and border-radius of the icons when the buttons are hovered over.
10. .btn:nth-child(1) .btn-text and .btn:nth-child(2) .btn-text Selectors:
- Styles applied to the text within the first and second buttons respectively.
- These styles set the font weight and text color for these specific buttons.
11. .btn-container .btn:hover .btn-text Selector:
- Styles applied to the text within buttons when their parent ".btn" is being hovered over.
- This style is used to hide the text when the buttons are hovered over, for a visual effect.
This will give our button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
margin: 0;
padding: 0;
}
body{
padding: 0 8%;
height: 100vh;
background-color: rgb(29, 29, 29);
display: flex;
align-items: center;
}
button{
border: none;
cursor: pointer;
background-color: unset;
font-family: 'Varela Round' , sans-serif;
}
.btn-container{
width: 100%;
max-width: 400px;
margin: auto;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.btn{
height: 52px;
border-radius: 30px;
font-size: 16px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
#buy-now{
width: 35%;
min-width: 140px ;
background-color: rgb(255, 94, 94);
padding: 6px;
}
#how-to-order{
width: 45%;
min-width: 180px;
padding: 0;
}
.btn-container .btn-icon{
font-size: 18px;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.8s;
}
.fa-shopping-bag{
width: 40px;
background-color: rgb(255, 216, 89);
}
.fa-play{
width: 52px;
color: rgb(255, 216, 89);
border-left:5px solid rgb(255, 94, 94) ;
}
.btn:hover .btn-icon{
width: 100%;
border-radius:25px;
}
.btn:nth-child(1) .btn-text{
font-weight: 600;
}
.btn:nth-child(2) .btn-text{
color: aliceblue;
}
.btn-container .btn:hover .btn-text{
display: none;
} Final Output:
Conclusion:
By following this guide, you've learned how to create a button with a hover effect using HTML and CSS. Interactive buttons enhance user engagement and contribute to a dynamic web experience. Incorporate these skills into your web design projects to create more user-friendly and visually appealing interfaces.
Code by: Mehrshad
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
