make a button css

Creating a CSS button can be an exciting and simple exercise if you’re trying to learn CSS or even if you’re a seasoned developer who wants to brush up on the basics. In this article, we will learn how to create a simple and beautiful CSS button for your website.

Code snippet for CSS Button

Below is the HTML and CSS code snippet to create a simple CSS button:

<!--HTML-->
<button class="simple-button">Click Me!</button>

/* CSS */
.simple-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;
}

Code Explanation for CSS Button

Here is a step-by-step explanation of how we created the CSS button:

HTML Code:

• We begin with a button HTML element.
• We then give it a class name of “simple-button”.

CSS Code:

• For our button style, we first set the background color to green using the hex color ‘#4CAF50’.
• We remove the default button border by setting it to ‘none’.
• To ensure our button text color contrasts the background, we set the color value to white.
• Padding is then used to increase the button size. ‘15px’ adjusts the top and bottom padding, while ‘32px’ adjusts the left and right padding.
• We align our button text to the center with ‘text-align’.
• We remove any default text decoration with ‘text-decoration: none’.
• We use ‘display: inline-block’ to set our button as an inline-level block container.
• The font size is set to ‘16px’, making our button text big enough to read.
• Using ‘margin: 4px 2px’, we create a small space around our button.
• Next, with ‘cursor: pointer’, we change the cursor to a pointer when the user hovers over the button.

With this breakdown, you should now be able to create a CSS button and understand each step taken to achieve the result. Explore further by adding other CSS properties to customize your buttons to your liking.