How to Make Rounded Corners buttons in HTML and CSS
Hello, and welcome to this tutorial on codedamn! Today, we're going to learn how to create rounded corner buttons using HTML and CSS. Rounded corner buttons are a nice design feature that can make your website or app look more modern and user-friendly. By the end of this tutorial, you'll know how to create your own custom rounded corner buttons that you can use in your own projects.
Getting Started
To begin, we'll need a basic HTML file structure. Create a new HTML file with the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creating Rounded Corner Buttons</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Your button code will go here --> </body> </html>
We'll also need a CSS file to style our button. Create a new file called styles.css and link it to your HTML file using the <link> tag.
Before we create a rounded corner button, let's first create a basic button using HTML. To do this, we'll use the <button> element. Place the following code inside the <body> tag of your HTML file:
<button>Click Me!</button>
Now we have a basic button that says "Click Me!" Let's style the button using CSS.
Open your styles.css file and add the following code:
button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }
This code styles our button to have a green background, white text, and no border. The padding, text alignment, and font size are also adjusted to make the button look more appealing. Save your changes and refresh your browser to see the updated button.
Adding Rounded Corners
Now that we have a basic styled button, let's add rounded corners to it. To do this, we'll use the border-radius property in CSS. Add the following line of code to your button style in the styles.css file:
border-radius: 12px;
The border-radius property allows you to control the curvature of the button's corners. In this case, we're setting the border radius to 12 pixels, which will give our button nicely rounded corners. Save your changes and refresh your browser to see the updated button.
Now that you know how to create a basic rounded corner button, you can customize it further by changing its color, size, and other properties. Here are some examples of how you can customize your button:
To change the button's background color, simply update the background-color property in the styles.css file. For example, to change the button color to blue, change the background-color value to #007BFF:
background-color: #007BFF; /* Blue */
To change the button size, adjust the padding and font-size properties. For example, to make the button larger, you can increase the padding and font size values:
padding: 20px 40px; font-size: 20px;
Adding Hover Effects
Adding a hover effect to your button can make it more interactive and engaging. To do this, use the :hover pseudo-class in your CSS. For example, to change the button's background color when the mouse hovers over it, add the following code to your styles.css file:
button:hover { background-color: #555555; /* Dark grey */ }
Save your changes and refresh your browser to see the updated button with hover effects.
Frequently Asked Questions
A: Yes, you can create rounded corner buttons using CSS frameworks like Bootstrap. In Bootstrap, you can use the .rounded or .rounded-pill classes to add rounded corners to your buttons.
A: Yes, you can use the border-radius property to add rounded corners to almost any HTML element, such as <div>, <img>, and <input> elements.
A: To create a button with circular or pill-shaped corners, set the border-radius property to a high value, such as 50% or 1000px. This will make the button's corners completely rounded.
border-radius: 50%; /* Circular button */
We hope you enjoyed this tutorial on creating rounded corner buttons using HTML and CSS. Now you have the knowledge and tools to create your own custom buttons that will make your website or app look more modern and user-friendly. Happy coding!
Sharing is caring
Did you like what Mayank Sharma wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses:
