HTML / CSS

Pure CSS Buttons

By Praveen Kumar March 24, 2018

ShareTwitter Facebook

493Views

Buttons are most important in frontend designing. Here I prepared some of the ways to style buttons using css.

1.Basic Button Styling

Here the simple code for default button and CSS button

<h1>Basic CSS button Styling</h1>
<button>Default Button</button>
<button class="btn">CSS Button</button>

CSS code

.btn
{
  background-color: #7BAC06; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

See the Pen Basic CSS Button Styling by Pintire (@pintire) on CodePen.

2.Button Colors

Change the background color of a button with the background-color property

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

<button class="btn">Green</button>
<button class="btn blue">Blue</button>
<button class="btn red">Red</button>
<button class="btn purple">Purple</button>
<button class="btn black">Black</button>

CSS Code

.btn {
    background-color: #4CAF50; /* 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;
}

.blue {background-color: #3D5AFE;} /* Blue */
.red {background-color: #F7412C;} /* Red */ 
.purple {background-color: #6834BC;} /* Purple */ 
.black {background-color: #555555;} /* Black */