Pure CSS Buttons

Pure CSS Buttons

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

Basic Button Styling

<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 */

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

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation