make buttons css

Creating stylish and eye-catching buttons is a must in modern web design. With CSS, we can easily generate these buttons while saving time and staying consistent.

Code snippet for Making Buttons in CSS

.button {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border: none;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  padding: 15px 32px;
}

.button:hover {
  background-color: #45a049;
}

In order to use the style, we just need to add the “button” class to any HTML element:

<button class="button">Hello</button>

Code Explanation for Making Buttons in CSS

In the example above, we are creating a class called button.

The .button style starts by setting the width and height of the button. You can adjust these to your liking.

background-color is the initial background color of the button. #4CAF50 is a dark green color.

The color property is responsible for the text color, which we’ve set to white.

border: none; removes the default button border.

text-align: center; simply centers the text within the button.

The display property is set to inline-block, meaning it will not take up the entire width of its parent element.

font-size is self-explanatory, and margin is used to give space around the button.

transition-duration is used to determine how long the hover effect transition will last.

We applied a cursor: pointer; style which changes the cursor to a hand whenever it’s over the button, this is a common practice to indicate that an element is clickable.

Next, we use the :hover selector to change the background color when the mouse hovers over the button. #45a049 is a lighter green than #4CAF50.

To apply this CSS to an HTML button, you simply need to give the button the class name button. Whenever you want to create a button with this style, you can just apply the button class to it. This way, all your buttons can have a consistent style.

By following these simple steps, you can create compelling, clear buttons that are easy for your site’s visitors to interact with.