Top
Home Forum Contact About Us Share Login 🌙


logo2 CSS Web Buttons Properties


css web buttons properties,Collection of hand-picked free HTML and CSS button code examples. In the last years, the web has been invaded by the cool buttons provided by libraries like Bootstrap. Even if these libraries are cool and feature rich, they're also really heavy, and it's a waste to load hundreds of kilobytes if you need to show just one button. In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS. You are free to copy, modify and use this code as you wish. All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.

Facebook Tweet1

CSS Web Buttons Basic Properties

it is the basic button model.

live demo basic button


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}


.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 


.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }



.white {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff; }
  .white:hover {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6; }
  .white:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
 
.dark {
  color: #fff;
  background-color: #0d0d0d;
  border-color: #0d0d0d; }
  .dark:hover {
    color: #fff;
    background-color: black;
    border-color: black; }
  .dark:focus {
    color: #fff;
    background-color: black;
    border-color: black;
    box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }

.link {
background-color: transparent;
color: #007bff;
  text-decoration: none; }
  .link:hover {
 color: #0056b3;
    text-decoration: underline; }
  .link:focus {
    text-decoration: underline; }
 </style>

 <button type="button" class="button blue">Blue</button>
<button type="button" class="button gray">Gray</button>
<button type="button" class="button green">Green</button>
<button type="button" class="button red">Red</button>
<button type="button" class="button orange">Orange</button>
<button type="button" class="button purple">Purple</button>
<button type="button" class="button white">White</button>
<button type="button" class="button dark">Dark</button>
<button type="button" class="button link">Link</button>

CSS Web Buttons Outline Properties

it is the outline button model

live demo outline button


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}


.blue{
  color: #0090e7;
  background-color: transparent;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 231, 0.5);}
  


.gray {
  color: gray;
background-color: transparent;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #00d25b;
background-color: transparent;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #8f5fe8;
background-color: transparent;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #ffab00;
background-color: transparent;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }



.white {
  color: #fff;
  background-color: transparent;
  border-color: #ffffff; }
  .white:hover {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6; }
  .white:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
 
.dark {
  color: #fff;
  background-color: #18191b;
  border-color: #252321; }
  .dark:hover {
    color: #fff;
    background-color: #252321;
    border-color: 18191b; }
  .dark:focus {
    color: #fff;
    background-color: #222222;
    border-color: 18191b;
    box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }

.link {
background-color: transparent;
color: #007FFF;
  text-decoration: none; }
  .link:hover {
 color: cyan;
    text-decoration: underline; }
  .link:focus {
    text-decoration: underline; }
 </style>

<button type="button" class="button blue">Blue</button>
<button type="button" class="button gray">Gray</button>
<button type="button" class="button green">Green</button>
<button type="button" class="button red">Red</button>
<button type="button" class="button orange">Orange</button>
<button type="button" class="button purple">Purple</button>
<button type="button" class="button white">White</button>
<button type="button" class="button dark">Dark</button>
<button type="button" class="button link">Link</button>

CSS Web Buttons Inverse Properties

it is the inverse button model

live demo inverse button


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}


.blue{
  background-color: rgba(0, 144, 231, 0.2);
  border-color: rgba(0, 144, 231, 0); }
.blue:not(.blue-light) {
    color: #0090e7; }
  .blue:hover{
    color: #ffffff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
   box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.5); } 

.gray {
  color: #fff;
  background-color: rgba(228, 234, 236, 0.2);
  rgba(228, 234, 236, 0);}
  .gray:hover {
    color: #000;
    background-color: #e4eaec;
    border-color: #e4eaec; }
  .gray:focus {
   box-shadow: 0 0 0 3px rgba(228, 234, 236, 0.5); }
  
.green {
  color: #00d25b;
  background-color: rgba(0, 210, 91, 0.2);
border-color: rgba(0, 210, 91, 0);
   }
  .green:hover {
    color: #fff;
    background-color: #00d25b;
    border-color: #00d25b; }
  .green:focus {
   box-shadow: 0 0 0 3px rgba(0, 210, 91, 0.5); }

.red {
  color: #fc424a;
background-color: rgba(252, 66, 74, 0.2);
border-color: rgba(252, 66, 74, 0); }
  .red:hover {
    color: #fff;
    background-color: #fc424a;
    border-color: #fc424a; }
  .red:focus {
   box-shadow: 0 0 0 3px rgba(252, 66, 74, 0.5); }

.purple {
  color: #8f5fe8;
  background-color: rgba(143, 95, 232, 0.2);
  border-color: rgba(143, 95, 232, 0); }
  .purple:hover {
    color: #fff;
    background-color: #8f5fe8;
    border-color: #8f5fe8; }
  .purple:focus {
   box-shadow: 0 0 0 3px rgba(143, 95, 232, 0.5);}
 
.orange {
  color: #ffab00;
  background-color: rgba(255, 171, 0, 0.2);
  border-color: rgba(255, 171, 0, 0);  }
  .orange:hover {
    color: #fff;
    background-color: #ffab00;
    border-color: #ffab00; }
  .orange:focus{
   box-shadow: 0 0 0 3px rgba(255, 171, 0, 0.5); }



.white {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0); }
  .white:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff; }
  .white:focus {
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }
 
.dark {
  color: #fff;
  background-color: #18191b;
  border-color: #252321; }
  .dark:hover {
    color: #fff;
    background-color: #252321;
    border-color: 18191b; }
  .dark:focus {
    color: #fff;
    background-color: #222222;
    border-color: 18191b;
    box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }


.link {
background-color: transparent;
color: #007FFF;
  text-decoration: none; }
  .link:hover {
 color: cyan;
    text-decoration: underline; }
  .link:focus {
    text-decoration: underline; }
</style>

<button type="button" class="button blue">Blue</button>
<button type="button" class="button gray">Gray</button>
<button type="button" class="button green">Green</button>
<button type="button" class="button red">Red</button>
<button type="button" class="button orange">Orange</button>
<button type="button" class="button purple">Purple</button>
<button type="button" class="button white">White</button>
<button type="button" class="button dark">Dark</button>
<button type="button" class="button link">Link</button>
CSS Web Buttons Size Properties

it is the size button model

demo size button


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}


.blue{
  background-color: rgba(0, 144, 231, 0.2);
  background-image: none;
  border-color: rgba(0, 144, 231, 0); }
.blue:not(.blue-light) {
    color: #0090e7; }
  .blue:hover{
    color: #ffffff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
   box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.5); } 
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.lg{
  padding: 1rem 2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

 }

.md{
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

 }

.sm{
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem; 
}

 </style>

<button type="button" class="button blue lg">Blue</button>
<button type="button" class="button green md">Green</button>
<button type="button" class="button red sm">Red</button>
CSS Web Buttons Rounded Properties

it is the rounded button model

live demo rounded button


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;
border-radius: 50px; }


.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 


.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }



.white {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff; }
  .white:hover {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6; }
  .white:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
 
.dark {
  color: #fff;
  background-color: #18191b;
  border-color: #252321; }
  .dark:hover {
    color: #fff;
    background-color: #252321;
    border-color: 18191b; }
  .dark:focus {
    color: #fff;
    background-color: #222222;
    border-color: 18191b;
    box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }

.link {
background-color: transparent;
color: #007FFF;
  text-decoration: none; }
  .link:hover {
 color: cyan;
    text-decoration: underline; }
  .link:focus {
    text-decoration: underline; }
 </style>

<button type="button" class="button blue">Blue</button>
<button type="button" class="button gray">Gray</button>
<button type="button" class="button green">Green</button>
<button type="button" class="button red">Red</button>
<button type="button" class="button orange">Orange</button>
<button type="button" class="button purple">Purple</button>
<button type="button" class="button white">White</button>
<button type="button" class="button dark">Dark</button>
<button type="button" class="button link">Link</button>

CSS Web Buttons Icon Properties

it is the icon button model

live demo icon button


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
font-size: 17px;
border-radius: 4px;
cursor: pointer;
border-radius: 50px; 
width: 42px;
height: 42px;
padding: 0; 
margin-right: .5rem; 
margin-left: .5rem; }




.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 


.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

.white {
  color: #212529;
  background-color: #00ffea;
  border-color: #00ffea; }
  .white:hover {
    color: #212529;
    background-color: #7ec0f6;
    border-color: #7ec0f6; }
  .white:focus {
    color: #212529;
    background-color: #1f92ef;
    border-color: #1f92ef;
    box-shadow: 0 0 0 0.2rem rgba(31, 146, 239, 0.5); }
</style>

<button type="button" class="buttonic blueic"><i class="fa fa-internet-explorer"></i></button>
<button type="button" class="buttonic whiteic"><i class="fa fa-home"></i></button>
<button type="button" class="buttonic greenic"><i class="fa fa-envelope"></i></button>
<button type="button" class="buttonic redic"><i class="fa fa-star"></i></button>
<button type="button" class="buttonic orangeic"><i class="fa fa-map-marker"></i></button>
<button type="button" class="buttonic purpleic"><i class="fa fa-heart"></i></button>
<button type="button" class="buttonic greenic"><i class="fa fa-music"></i></button>
<button type="button" class="buttonic blueic"><i class="fa fa-signal"></i></button>
<button type="button" class="buttonic redic"><i class="fa fa-line-chart"></i></button>

CSS Web Buttons Social Properties

it is the social button model

live demo social button


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;
}

.twitter {
  background: #2caae1;
  color: #ffffff; }
  .twi:hover, .twi:focus {
    background: #1b8dbf;
    color: #ffffff; }
  
.facebook {
  background: #3b579d;
  color: #ffffff; }
  .face:hover, .face:focus {
    background: #2d4278;
    color: #ffffff; }

.youtube {
  background: #e52d27;
  color: #ffffff; }
  .you:hover, .you:focus {
    background: #c21d17;
    color: #ffffff; }

.google {
  background: #dc4a38;
  color: #ffffff; }
  .google:hover, .google:focus {
    background: #bf3322;
    color: #ffffff; }
 
.linkedin {
  background: #0177b5;
  color: #ffffff; }
  .linkedin:hover, .linkedin:focus {
    background: #015682;
    color: #ffffff; }

.pinterest {
  background: #cc2127;
  color: #ffffff; }
  .pinterest:hover, .pinterest:focus {
    background: #a01a1f;
    color: #ffffff; }
  </style>

<button type="button" class="button facebook"><i class="fa fa-facebook"></i> Facebook</button>
<button type="button" class="button youtube"><i class="fa fa-youtube"></i> Youtube</button>
<button type="button" class="button twitter"><i class="fa fa-twitter"></i> Twitter</button>
<button type="button" class="button google"><i class="fa fa-google"></i> Google</button>
<button type="button" class="button linkedin"><i class="fa fa-linkedin"></i> Linkedin</button>
<button type="button" class="button pinterest"><i class="fa fa-pinterest"></i> Pinterest</button><p>

CSS Web Buttons Social Icons Properties

it is the social icons button model

live demo Social Icons button


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
width: 50px;
    height: 50px;
    padding: 0; 
border-radius: 4px;
cursor: pointer;}

.buttonr {
 text-align: center;
border: 1px solid transparent;
width: 50px;
    height: 50px;
    padding: 0; 
border-radius: 4px;
cursor: pointer;
border-radius: 50px; }


.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 


.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }


.blueo{
  color: #0090e7;
  background-color: transparent;
  border-color: #0090e7; }
  .blueo:hover{
    color: #fff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blueo:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 231, 0.5);}
  


.grayo {
  color: gray;
background-color: transparent;
  border-color: #e4eaec; }
  .grayo:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .grayo:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.greeno {
  color: #00d25b;
background-color: transparent;
  border-color: #00d25b; }
  .greeno:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .greeno:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.redo {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .redo:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .redo:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purpleo {
  color: #8f5fe8;
background-color: transparent;
  border-color: #8f5fe8; }
  .purpleo:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purpleo:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orangeo {
  color: #ffab00;
background-color: transparent;
  border-color: #ffab00; }
  .orangeo:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orangeo:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

 </style>

<button type="button" class="button  blue"><i class="fa fa-anchor "></i></button>
<button type="button" class="button gray"><i class="fa fa-apple"></i></button>
<button type="button" class="button green"><i class="fa fa-bank"></i></button>
<button type="button" class="button red"><i class="fa fa-balance-scale"></i></button>
<button type="button" class="button orange"><i class="fa fa-birthday-cake"></i></button>
<button type="button" class="button purple"><i class="fa fa-briefcase"></i></button>

<button type="button" class="button blueo"><i class="fa fa-anchor"></i></button>
<button type="button" class="button grayo"><i class="fa fa-apple"></i></button>
<button type="button" class="button greeno"><i class="fa fa-bank"></i></button>
<button type="button" class="button redo"><i class="fa fa-balance-scale"></i></button>
<button type="button" class="button orangeo"><i class="fa fa-birthday-cake"></i></button>
<button type="button" class="button purpleo"><i class="fa fa-briefcase"></i></button>

<button type="button" class="buttonr blue"><i class="fa fa-anchor"></i></button>
<button type="button" class="buttonr gray"><i class="fa fa-apple"></i></button>
<button type="button" class="buttonr green"><i class="fa fa-bank"></i></button>
<button type="button" class="buttonr red"><i class="fa fa-balance-scale"></i></button>
<button type="button" class="buttonr orange"><i class="fa fa-birthday-cake"></i></button>
<button type="button" class="buttonr purple"><i class="fa fa-briefcase"></i></button>

CSS Web Buttons Text And Icon Properties

it is the text and icon button model

live demo Text And Icon button


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 0.50px 10px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}


.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 


.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }


.blueo{
  color: #0090e7;
  background-color: transparent;
  border-color: #0090e7; }
  .blueo:hover{
    color: #fff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blueo:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 231, 0.5);}
  


.grayo {
  color: gray;
background-color: transparent;
  border-color: #e4eaec; }
  .grayo:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .grayo:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.greeno {
  color: #00d25b;
background-color: transparent;
  border-color: #00d25b; }
  .greeno:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .greeno:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.redo {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .redo:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .redo:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purpleo {
  color: #8f5fe8;
background-color: transparent;
  border-color: #8f5fe8; }
  .purpleo:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purpleo:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orangeo {
  color: #ffab00;
background-color: transparent;
  border-color: #ffab00; }
  .orangeo:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orangeo:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

 .white {
  color: #000;
  background-color: transparent;
  border-color: #000; }
  .whitetx:hover {
    color: #fff;
    background-color: #000;
    border-color: #e6e6e6; }
  .whitetx:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }

.d-inline-block {
  display: inline-block !important; }

.text-left {
  text-align: left !important; }

.font-weight-light {
  font-weight: 300 !important; }

.d-block {
  display: block !important; }
 </style>

<button type="button" class="button  blue "><i class="fa fa-sign-in"></i> Sign In</button>
<button type="button" class="button  gray "><i class="fa fa-warning"></i> Warning </button>
<button type="button" class="button  green "><i class="fa fa-upload"></i> Upload </button>
<button type="button" class="button  red ">Print <i class="fa fa-print"></i></button>
<button type="button" class="button  orange "><i class="fa fa-refresh"></i> Refresh </button>
<button type="button" class="button  purple ">Edit <i class="fa fa-edit"></i></button>
<hr>
<button type="button" class="button  blueo "><i class="fa fa-sign-in"></i> Sign In</button>
<button type="button" class="button  grayo "><i class="fa fa-warning"></i> Warning </button>
<button type="button" class="button  greeno "><i class="fa fa-upload"></i> Upload </button>
<button type="button" class="button  redo ">Print <i class="fa fa-print"></i></button>
<button type="button" class="button  orangeo "><i class="fa fa-refresh"></i> Refresh </button>
<button type="button" class="button  purpleo ">Edit <i class="fa fa-edit"></i></button>
<hr>
<button type="button" class="button  white "><i class="fa fa-apple fa-3x"></i><span class="d-inline-block text-left">
<small class="font-weight-light d-block">Available on the</small> App Store </span></button>

<button type="button" class="button  white "><i class="fa fa-android fa-3x"></i><span class="d-inline-block text-left">
<small class="font-weight-light d-block">Get it on the</small> Google Play </span></button>



If you’d like to send us feedback, or have any other question, please fill out the form below and we will get back to you as soon as possible.



×
QUICK MENU
Basic Buttons Basic Dropdown Buttons Outline Buttons Outline Dropdown Buttons Inverse Buttons Size Buttons Size Dropdown Buttons Rounded Buttons Icon Buttons Icon Dropdown Buttons Social Buttons Social Icons Buttons Text And Icon Buttons animation Buttons animation gradient Buttons Gradient Buttons Block Buttons