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.
Webinars for all programming languages. netbax.net is an education site for learning web design. Content includes tutorials and references for HTML, CSS, JavaScript, PHP, Python, SQL, Jquery, Xml, Ajax and Bootstrap. It is a website whose services are completely free....
Online Ide Html Code Editor.Create your work, and publish it on codebax.com and share your creation.choose the template you like and copy the link that is in iframe format and paste it on your website.you don't need to create whole code. simply and easily upload your creation.
Online Images Editor maker.it's an amazing image editor. it gives you many options to edit your image. you just upload your image and start editing. when you're done you can download it to your computer. it has all the tools you'll need to complete the editing.
Css Button Generator With Icon And Texture.is an amazing web button design generator. it is the only website with so many design possibilities. it is the most comprehensive web. button design generator. you are given all the options you need to create a web button. and don't forget it's completely free.
it is the
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>
it is the
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>
it is the
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>
it is the
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>
it is the
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>
it is the
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>
it is the
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>
it is the
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>
it is the
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.