CSS Button For Beginners

Today in this blog you’ll learn how to create simple button style css using only html & css. For this beginner CSS tutorial we will create button using simple css utility classes. Before we start you need to resetting margin and padding in CSS file.

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}

First you need to create .btn class in your css file for base style.

.btn {
 padding: 0.5rem 1.5rem;
 cursor: pointer;
 display: inline-block;
 text-decoration: none;
 font-weight: 400;
 border-style: none;
 border-radius: 0.25rem; 
}

Next, you need to create .bg-blue or .bg-primary chose one of this. Then create .text-white class.

.bg-blue {
 background-color: #0000ff;
}

.text-white {
 color: #fff;
}

Now use this classes in your html file.

<button class="text-white btn bg-blue">Button</button>

CSS 3 button

You can create more button.

style.css

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}
.btn {
 padding: 0.5rem 1.5rem;
 cursor: pointer;
 display: inline-block;
 text-decoration: none;
 font-weight: 400;
 border-style: none;
 border-radius: 0.25rem; 
}

.bg-red {
 background-color: #ff0000;
}
.bg-green {
 background-color: #009933;
}
.bg-gray {
 background-color: #808080;
}
.bg-blue {
 background-color: #0000ff;
}
.bg-yellow {
 background-color: #ffff00;
}
.bg-indigo {
 background-color: #4b0082;
}
.bg-black {
 background-color: #000000;
}
.bg-white {
 background-color: #fff;
}
.text-white {
 color: #fff;
}
.text-black {
 color: #000000;
}

index.html

<button class="text-white btn bg-green">Button</button>
<button class="text-white btn bg-gray">Button</button>
<button class="text-black btn bg-yellow">Button</button>
<button class="text-white btn bg-blue">Button</button>
<button class="text-white btn bg-indigo">Button</button>
<button class="text-black bg-white btn">Button</button>
<button class="text-white bg-black btn">Button</button>

css button collection