CSS Simple Buttons Examples

In this tutorial we will see simple css button, css button style, Outline css button, button hover css, button css gradien, examples with CSS.


Example 1

Simple CSS Buttons

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;
}
.fs-14 {
  font-size: 0.875rem;
}
.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 fs-14 btn bg-red">Button</button>
<button class="text-white fs-14 btn bg-green">Button</button>
<button class="text-white fs-14 btn bg-gray">Button</button>
<button class="text-black fs-14 btn bg-yellow">Button</button>
<button class="text-white fs-14 btn bg-blue">Button</button>
<button class="text-white fs-14 btn bg-indigo">Button</button>
<button class="text-black bg-white fs-14 btn">Button</button>
<button class="text-white bg-black fs-14 btn">Button</button>


Example 2

CSS Outline buttons with hover

style.css

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

.bg-white {
  background-color: #fff;
  border-style: none;
}
.text-white {
  color: #fff;
}
.text-black {
  color: #000000;
}

.ba {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}
.ba-red {
  border-color: #ff0000;
  color: #ff0000;
}
.ba-green {
  border-color: #009933;
  color: #009933;
}
.ba-gray {
  border-color: #808080;
  color: #808080;
}
.ba-blue {
  border-color: #0000ff;
  color: #0000ff;
}
.ba-yellow {
  border-color: #ffff00;
  color: #ffff00;
}
.ba-indigo {
  border-color: #4b0082;
  color: #4b0082;
}
.ba-black {
  border-color: #000000;
  color: #000000;
}
.ba-red:hover {
  background-color: #ff0000;
  color: #fff;
}
.ba-green:hover {
  background-color: #009933;
  color: #fff;
}
.ba-gray:hover {
  background-color: #808080;
  color: #fff;
}
.ba-blue:hover {
  background-color: #0000ff;
  color: #fff;
}
.ba-yellow:hover {
  background-color: #ffff00;
  color: #000000;
}
.ba-indigo:hover {
  background-color: #4b0082;
  color: #fff;
}
.ba-black:hover {
  background-color: #000000;
  color: #fff;
}

index.html

<button class="bg-white fs-14 btn ba ba-red">Button</button>
<button class="bg-white fs-14 btn ba ba-green">Button</button>
<button class="bg-white fs-14 btn ba ba-gray">Button</button>
<button class="bg-white fs-14 btn ba ba-blue">Button</button>
<button class="bg-white fs-14 btn ba ba-yellow">Button</button>
<button class="bg-white fs-14 btn ba ba-indigo">Button</button>
<button class="bg-white fs-14 btn ba ba-black">Button</button>


Example 3

CSS Gradient Buttons style

style.css

.btn {
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  border-style: none;
  border-radius: 5px;
}
.fs-14 {
  font-size: 0.875rem;
}
.bg-red-gradient {
  background-color: #ff933b;
  background-image: linear-gradient(147deg, #ff793b 0%, #ff2525 74%);
}
.bg-green-gradient {
  background-color: #009933;
  background-image: linear-gradient(
    45deg,
    #009933 0%,
    #47ca58 52%,
    #88daab 90%
  );
}
.bg-gray-gradient {
  background-color: #808080;
  background-image: linear-gradient(62deg, #808080 0%, rgb(129, 119, 119) 100%);
}
.bg-blue-gradient {
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.bg-yellow-gradient {
  background-color: #ffff00;
  background-image: linear-gradient(45deg, #ffff00 0%, #f6f2b6 100%);
}
.bg-indigo-gradient {
  background-color: #4b0082;
  background-image: linear-gradient(
    225deg,
    #4b0082 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
}
.bg-black-gradient {
  background-color: #000000;
  background-image: linear-gradient(45deg, #000000 0%, #5c5c57 100%);
}
.bg-white-gradient {
  background-color: #fff;
  background-image: linear-gradient(45deg, #fff 0%, #f6f2b6 100%);
}
.text-white {
  color: #fff;
}
.text-black {
  color: #000000;
}

index.html

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