button { 

    color:#050; 

    font: old 84% 'trebuchet ms',helvetica,sans-serif; 

    background-color:#fed; 

    border:1px solid; 

    border-color: #696 #363 #363 #696; 

}

<style>

  /* Example 1: Styling a button with CSS */

  .my-button {

    background-color: #4CAF50;

    color: white;

    padding: 10px 20px;

    border: none;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    border-radius: 4px;

  }

​

  /* Example 2: Adding a hover effect to a button */

  .my-button:hover {

    background-color: #45a049;

  }

​

  /* Example 3: Styling a button using inline styles */

  .inline-button {

    background-color: #008CBA;

    color: white;

    padding: 10px 20px;

    border: none;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    border-radius: 4px;

  }

</style>

​

<!-- Example usage -->

<button class="my-button">Styled Button</button>

​

<button style="background-color: #008CBA; color: white; padding: 10px 20px; border: none; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 4px;">Inline Styled Button</button>

/* Add style when button is focused or hovered */

button:focus,

button:hover {

  background-color: #0077ff;

  color: #e0efff;

}

<button class="pure-button pure-button-disabled">A Disabled Button</button>

<button class="pure-button" disabled="">A Disabled Button</button>

<a class="pure-button" href="#">A Pure Button</a>

<button class="pure-button">A Pure Button</button>

<div class="pure-button-group" role="group" aria-label="...">

    <button class="pure-button">A Pure Button</button>

    <button class="pure-button">A Pure Button</button>

    <button class="pure-button pure-button-active">A Pure Button</button>

</div>

<button class="pure-button">

    <i class="fa fa-cog"></i>Settings

</button>

<a class="pure-button" href="#">

    <i class="fa fa-shopping-cart fa-lg"></i>Checkout

</a>

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>

<button class="pure-button pure-button-primary">A Primary Button</button>

<a class="pure-button pure-button-active" href="#">An Active Button</a>

<button class="pure-button pure-button-active">An Active Button</button>