How to create button in css

CssHow-ToBeginner · 3 min read

How to Create a Button in CSS: Simple Steps and Example

To create a button in CSS, use the button HTML element and style it with CSS properties like background-color, padding, and border-radius. This lets you control the button's look and feel easily.

📐

Syntax

The basic syntax to style a button in CSS targets the button element or a class assigned to it. You set properties like background-color for color, padding for space inside, border for outlines, and border-radius for rounded corners.

button: The HTML element for clickable buttons.
background-color: Sets the button's background color.
padding: Adds space inside the button around the text.
border: Defines the button's border style and thickness.
border-radius: Rounds the corners of the button.
cursor: Changes the mouse pointer when hovering.

css

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

💻

Example

This example shows a simple green button with white text, rounded corners, and padding. When you hover over it, the cursor changes to a pointer, indicating it is clickable.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Button Example</title>
<style>
  button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>
  <button>Click Me</button>
</body>
</html>

Output

A green rectangular button with white text 'Click Me' and slightly rounded corners. On hover, the button color darkens.

⚠️

Common Pitfalls

Common mistakes when creating buttons in CSS include:

Not removing the default border, which can clash with your design.
Using fixed pixel sizes for padding or font, which can cause poor scaling on different devices.
Forgetting to change the cursor to pointer, which can confuse users about clickability.
Not adding hover effects, making buttons feel static and less interactive.

css

/* Wrong: Default border and no cursor change */
button {
  background-color: blue;
  color: white;
  padding: 10px 15px;
}

/* Right: Remove border and add cursor pointer */
button {
  background-color: blue;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

📊

Quick Reference

Here are quick tips for styling buttons in CSS:

Use background-color to set button color.
Use padding for comfortable click area.
Remove default border for cleaner look.
Add border-radius for rounded corners.
Use cursor: pointer to show it’s clickable.
Add :hover styles for interactivity.

✅

Key Takeaways

Use the button element and style it with CSS properties like background-color, padding, and border-radius.

Remove the default border and add cursor: pointer for better user experience.

Add hover effects to make buttons feel interactive and responsive.

Use relative units like rem for font size and padding for better scaling.

Test buttons on different devices to ensure they look good and are easy to click.