OneBite.Dev - Coding blog in a bite size

make buttons in css

Code snippet for how to make buttons in css with sample and detail explanation

In the web development world, CSS is a vital tool used to enhance a website’s appearance. One key aspect of website design that can be handled using CSS is button creation and styling. In this article, we will walk you through creating beautiful buttons in CSS step-by-step.

Code snippet for Creating Buttons

Below is a code snippet that shows a simple CSS button:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<button class="button">Click Me</button>

</body>
</html>

Code Explanation for Creating Buttons

Now, let’s break down the snippet above:

  1. We first start with the HTML <button> tag where we’ll be applying our CSS.

  2. The class “button” is assigned to the button element. This allows us to link our HTML and CSS. In CSS, classes are used as selectors, letting us choose which HTML elements to style.

  3. Within the style section, we define the look of the button by branching out several properties inside the .button{} selector:

    • background-color: #4CAF50; sets the background color of the button to a green shade.

    • border: none; removes the default button border.

    • color: white; changes the color of the text inside the button to white.

    • padding: 15px 32px; gives the button some space between its border and the text inside it. The first value is the vertical padding, and the second one is a horizontal padding.

    • text-align: center; centers the text inside the button.

    • text-decoration: none; removes any default text decoration.

    • display: inline-block; allows the button to sit inline with other elements, but still have block properties.

    • font-size: 16px; sets the text size inside the button.

    • margin: 4px 2px; provides some space around the button.

    • cursor: pointer; changes the cursor to a hand symbol when hovered over the button, thereby indicating that it’s a clickable element.

And voila! There you have it, a beautifully styled button ready to be clicked! Mastering CSS button creation and styling is a great way to enhance your web development skills and to make your website more appealing to the user.

css