CSS-Buttons

Learn how to style buttons using CSS.

Basic Button Styling

Example 1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>CSS Buttons</h2>

    <button>Default Button</button>
    <a href="#" class="button">Link Button</a>
    <button class="button">Button</button>
    <input type="button" class="button" value="Input Button">
</body>
</html>

CSS

.button {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

Result View Example

Button Colors

Use the background-color property to change the background color of a button:

Example 2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Button Colors</h2>

    <p>Change the background color of a button with the background-color property:</p>

    <button class="button">Green</button>
    <button class="button button2">Blue</button>
    <button class="button button3">Red</button>
    <button class="button button4">Gray</button>
    <button class="button button5">Black</button>

</body>
</html>

CSS

.button {
  background-color: #04AA6D; /* 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;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */

Result View Example

Button Sizes

Use the font-size property to change the font size of a button:

Example 3

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Button Sizes</h2>
    
    <p>Change the font size of a button with the font-size property:</p>

    <button class="button button1">10px</button>
    <button class="button button2">12px</button>
    <button class="button button3">16px</button>
    <button class="button button4">20px</button>
    <button class="button button5">24px</button>

</body>
</html>

CSS

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Result View Example

Rounded Buttons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Rounded Buttons</h2>

    <p>Add rounded corners to a button with the border-radius property:</p>

    <button class="button button1">2px</button>
    <button class="button button2">4px</button>
    <button class="button button3">8px</button>
    <button class="button button4">12px</button>
    <button class="button button5">50%</button>


</body>
</html>

CSS

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Result View Example

Button Borders

Use the border property to add a border to a button:

Example 5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Colored Button Borders</h2>

    <p>Use the border property to add a border to the button:</p>

    <button class="button button1">Green</button>
    <button class="button button2">Blue</button>
    <button class="button button3">Red</button>
    <button class="button button4">Gray</button>
    <button class="button button5">Black</button>
</body>
</html>

CSS

.button {
  background-color: #04AA6D; /* 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;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #04AA6D;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

Result View Example

Button Hover Effects

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

Example 6

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../../../images/favicons/favicon-t.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Hoverable Buttons</h2>

    <p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
    <p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>

    <button class="button button1">Green</button>
    <button class="button button2">Blue</button>
    <button class="button button3">Red</button>
    <button class="button button4">Gray</button>
    <button class="button button5">Black</button>

</body>
</html>

CSS

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

Result View Example

Document

Document in project

You can Download PDF file.

CSS-Buttons

Basic Button Styling

Example 1

Button Colors

Example 2

Button Sizes

Example 3

Rounded Buttons

Button Borders

Example 5

Button Hover Effects

Example 6

Document

Refference