CSS Buttons

❮ Previous Next ❯

Discover how to make buttons look nice with CSS.

Basic Button Styling

Button Colors

You can alter the background color of a button by using the "background-color" property.

Button Sizes

You can adjust the size of a button's text using the "font-size" property in your HTML code like this:

You can adjust the space around a button using the "padding" property.

Rounded Buttons

You can make a button's corners look round by using the "border-radius" property.

Colored Button Borders

You can use the "border" property to give a button a colored border.

Hoverable Buttons

You can make a button look different when you hover your mouse over it by using the ":hover" selector.

Tip: You can control how fast the 'hover' effect occurs by adjusting the 'transition-duration' property.

Shadow Buttons

You can make a button look like it has a shadow by using the "box-shadow" property in HTML. Here's how you can do it:

Disabled Buttons

You can make a button look faded or disabled by using the "opacity" property.

Hint: You can also include the 'cursor' property with the 'not-allowed' value to show a 'no parking sign' when you hover over the button:

Button Width

The button's size is usually based on the text it contains. It will be as wide as the text. To make the button wider, you can use the "width" property.

Button Groups

To create a button group, you should remove any extra space around the buttons and make them float to the left. You can do this by adding the CSS style 'float: left' to each button.

Bordered Button Group

You can make a button group with borders by using the border property.

Vertical Button Group

To make buttons stack vertically instead of horizontally, use display:block instead of float:left.

Button on Image

Animated Buttons

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        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>
    <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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .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 */
    </style>
  </head>
  <body>
    <h2>Button Colors</h2>
    <p>To switch up the color of a button, use 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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* 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;
      }
    </style>
  </head>
  <body>
    <h2>Button Sizes</h2>
    <p>Adjust the size of a button's text using 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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* Green */
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

      .button1 {
        padding: 10px 24px;
      }

      .button2 {
        padding: 12px 28px;
      }

      .button3 {
        padding: 14px 40px;
      }

      .button4 {
        padding: 32px 16px;
      }

      .button5 {
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Button Padding</h2>
    <p>Modify the space around a button using the padding property.</p>
    <button class="button button1">10px 24px</button>
    <button class="button button2">12px 28px</button>
    <button class="button button3">14px 40px</button>
    <button class="button button4">32px 16px</button>
    <button class="button button5">16px</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* 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%;
      }
    </style>
  </head>
  <body>
    <h2>Rounded Buttons</h2>
    <p>To make a button look round, you can use 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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <h2>Colored Button Borders</h2>
    <p>To put a border around a button, you can use the border property like this:</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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable Buttons</h2>
    <p>Use the :hover selector to alter the appearance of the button when you move the mouse over it.</p>
    <p>
      <strong>Tip:</strong> Use the transition-duration attribute to control how fast the "hover" effect happens:
    </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>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* 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;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
      }

      .button1 {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .button2:hover {
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      }
    </style>
  </head>
  <body>
    <h2>Shadow Buttons</h2>
    <p>Use the box-shadow property to add shadows to the button:</p>
    <button class="button button1">Shadow Button</button>
    <button class="button button2">Shadow on Hover</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* 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;
      }

      .disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <h2>Disabled Button</h2>
    <p>Use the opacity property to make a button somewhat see-through (like it's not fully active):</p>
    <button class="button">Normal Button</button>
    <button class="button disabled">Disabled Button</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: rgb(0 151 167);
        /* 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 {
        width: 250px;
      }

      .button2 {
        width: 50%;
      }

      .button3 {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Set Button Widths</h2>
    <p>Use the width property to change the width of the button:</p>
    <button class="button button1">250px</button>
    <br>
    <button class="button button2">50%</button>
    <br>
    <button class="button button3">100%</button>
    <p>
      <strong>Tip:</strong> Use pixels if you want to set a specific width and use percent for buttons that adjust to different screen sizes (for example, 50% of the space of the element it's inside). Change the size of your browser window to see how it works.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: rgb(0 151 167);
        /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        float: left;
      }

      .btn-group .button:hover {
        background-color: #3e8e41;
      }
    </style>
  </head>
  <body>
    <h2>Button Groups</h2>
    <p>Remove margins and float the buttons to create a button group:</p>
    <div class="btn-group">
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
    </div>
    <p style="clear:both">
      <br>Don't forget to tidy up the layout after, or else this paragraph will also move alongside the buttons if it's not cleared from floating.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: rgb(0 151 167);
        /* Green */
        border: 1px solid green;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        float: left;
      }

      .btn-group .button:not(:last-child) {
        border-right: none;
        /* Prevent double borders */
      }

      .btn-group .button:hover {
        background-color: #3e8e41;
      }
    </style>
  </head>
  <body>
    <h2>Bordered Button Group</h2>
    <p>Add borders to create a bordered button group:</p>
    <div class="btn-group">
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
    </div>
    <p style="clear:both">
      <br>Don't forget to fix the layout after, or else this paragraph will also be positioned next to the buttons.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: rgb(0 151 167);
        /* Green */
        border: 1px solid green;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        width: 150px;
        display: block;
      }

      .btn-group .button:not(:last-child) {
        border-bottom: none;
        /* Prevent double borders */
      }

      .btn-group .button:hover {
        background-color: rgb(18 122 133);
      }
    </style>
  </head>
  <body>
    <h2>Vertical Button Group</h2>
    <div class="btn-group">
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
      <button class="button">Button</button>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        display: inline-block;
        border-radius: 4px;
        background-color: #f4511e;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 28px;
        padding: 20px;
        width: 200px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }

      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }

      .button span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }

      .button:hover span {
        padding-right: 25px;
      }

      .button:hover span:after {
        opacity: 1;
        right: 0;
      }
    </style>
  </head>
  <body>
    <h2>Animated Button</h2>
    <button class="button" style="vertical-align:middle">
      <span>Hover </span>
    </button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        display: inline-block;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: rgb(18 122 133);
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
      }

      .button:hover {
        background-color: rgb(33 91 97)
      }

      .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
      }
    </style>
  </head>
  <body>
    <h2>Animated Button - "Pressed Effect"</h2>
    <button class="button">Click Me</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .button {
        background-color: #f4511e;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        font-size: 16px;
        margin: 4px 2px;
        opacity: 0.6;
        transition: 0.3s;
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
      }

      .button:hover {
        opacity: 1
      }
    </style>
  </head>
  <body>
    <h2>Animated Button - Fade in Effect</h2>
    <button class="button">Hover Over Me</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        position: relative;
        background-color: rgb(0 151 167);
        border: none;
        font-size: 28px;
        color: #FFFFFF;
        padding: 20px;
        width: 200px;
        text-align: center;
        transition-duration: 0.4s;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
      }

      .button:after {
        content: "";
        background: #f1f1f1;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px !important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s
      }

      .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s
      }
    </style>
  </head>
  <body>
    <h2>Animated Button - Ripple Effect</h2>
    <button class="button">Click Me</button>
  </body>
</html>