by Ashwini Sheshagiri

A quick guide to styling buttons using CSS

Buttons have become an inevitable part of front end development. Thus, it is important to keep in mind a few things before you start styling buttons. I have gathered some of the ways of styling buttons using CSS. You can combine most of the methods in order to create a new style, too. To create CSS for gradients, you may use https://uigradients.com.

A simple “Get Started” button

.btn {
background: #eb94d0;

/* to create the gradients */

  background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);

/* to give the curved edge for the btn */

-webkit-border-radius: 28;  -moz-border-radius: 28;  border-radius: 28px;
text-shadow: 3px 2px 1px #9daef5;  -webkit-box-shadow: 6px 5px 24px #666666;  -moz-box-shadow: 6px 5px 24px #666666;  box-shadow: 6px 5px 24px #666666;
font-family: Arial;  color: #fafafa;  font-size: 27px;  padding: 19px;  text-decoration: none;}

/*button on hover*/

.btn:hover {
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);  background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);  background-image: -o-linear-gradient(top, #2079b0, #eb94d0);  background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
  text-decoration: none;}

Transparent background button

.btn {

/* Text color */

      color: #0099CC; 

/* Remove background color */

      background: transparent; 

/* Border thickness, line style, and color */

      border: 2px solid #0099CC;

/* Adds curve to border corners */

      border-radius: 6px; 

/* Make letters uppercase */

      border: none;      color: white;      padding: 16px 32px;      text-align: center;      display: inline-block;      font-size: 16px;      margin: 4px 2px;      -webkit-transition-duration: 0.4s; /* Safari */      transition-duration: 0.4s;      cursor: pointer;      text-decoration: none;      text-transform: uppercase;}.btn1 {      background-color: white;       color: black;       border: 2px solid #008CBA;}

/*button on hover*/

 .btn1:hover {      background-color: #008CBA;      color: white; }

Button with CSS Entities

You can find the complete list of CSS entities here: https://www.w3schools.com/cssref/css_entities.asp

You can also use HTML entities, but they’re limited. https://www.w3schools.com/html/html_entities.asp

.button {  display: inline-block;  border-radius: 4px;  background-color: #f4511e;  border: none;  color: #FFFFFF;  text-align: center;  font-size: 28px;  padding: 20px;  width: 200px;  transition: all 0.5s;  cursor: pointer;  margin: 5px;}
.button span {  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;}
.button span:after {
content: '\00bb';  /* CSS Entities. To use HTML Entities, use →*/
position: absolute;  opacity: 0;  top: 0;  right: -20px;  transition: 0.5s;}
.button:hover span {  padding-right: 25px;}
.button:hover span:after {  opacity: 1;  right: 0;}

Button with click animation

CSS: (SCSS)

$gray: #bbbbbb;
* {  font-family: 'Roboto', sans-serif;}
.container {  position: absolute;  top:50%;  left:50%;  margin-left: -65px;  margin-top: -20px;  width: 130px;  height: 40px;  text-align: center;}
.btn {      color: #0099CC; /* Text color */      background: transparent; /* Remove background color */      border: 2px solid #0099CC; /* Border thickness, line style, and color */      border-radius: 70px; /* Adds curve to border corners */      text-decoration: none;      text-transform: uppercase; /* Make letters uppercase */      border: none;      color: white;      padding: 16px 32px;      text-align: center;      text-decoration: none;      display: inline-block;      font-size: 16px;      margin: 4px 2px;      -webkit-transition-duration: 0.4s; /* Safari */      transition-duration: 0.4s;      cursor: pointer;}.btn1 {      background-color: white;       color: black;       border: 2px solid #008CBA;} .btn1:hover {      background-color: #008CBA;      color: white; }
b {  outline:none;  height: 40px;  text-align: center;  width: 130px;  border-radius:100px;  background: #fff;  border: 2px solid #008CBA;  color: #008CBA;  letter-spacing:1px;  text-shadow:0;  font:{    size:12px;    weight:bold;  }  cursor: pointer;  transition: all 0.25s ease;
&:active {    letter-spacing: 2px ;  }  &:after {    content:"";  }}.onclic {  width: 10px !important;  height: 70px !important;  border-radius: 50% !important;  border-color:$gray;  border-width:4px;  font-size:0;  border-left-color: #008CBA;  animation: rotating 2s 0.25s linear infinite;  &:hover {    color: dodgerblue;    background: white;  }}.validate {  content:"";  font-size:16px;  color: black;  background: dodgerblue;  border-radius: 50px;  &:after {    font-family:'FontAwesome';    content:" done \f00c";  }}
@keyframes rotating {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

Javascript: (JQuery)

$(function() {  $("#button").click(function() {    $("#button").addClass("onclic", 250, validate);  });
function validate() {    setTimeout(function() {      $("#button").removeClass("onclic");      $("#button").addClass("validate", 450, callback);    }, 2250);  }  function callback() {    setTimeout(function() {      $("#button").removeClass("validate");    }, 1250);  }});

Button with an image

.btn {
 background: #92c7eb; background-image: url(“http://res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-pv.png"); background-size: cover; background-position: center; display: inline-block; border: none; padding: 20px; width: 70px; border-radius: 900px; height: 70px; transition: all 0.5s; cursor: pointer;}.btn:hover{ width: 75px; height: 75px;}

Button with icons

index.html:

<div class="main"><button class="button" style="vertical-align:middle"><a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></button></a>  <div class="text"><strong>TWEET!</strong></div></div>

style.css:

button{  border: none;  border-radius: 50px;}html,body {  font-size: 20px;  min-height: 100%;  overflow: hidden;  font-family: "Helvetica Neue", Helvetica, sans-serif;    text-align: center;}.text {  padding-top: 50px;  font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}.text:hover{  cursor: pointer;  color: #1565C0;}.main {  padding: 0px 0px 0px 0px;  margin: 0;  background-image: url("https://someimg");  text-align: center;  background-size: 100% !important;  background-repeat: no-repeat;  width: 900px;  height: 700px;  }
.icon-button {  background-color: white;  border-radius: 3.6rem;  cursor: pointer;  display: inline-block;  font-size: 2rem;  height: 3.6rem;  line-height: 3.6rem;  margin: 0 5px;  position: relative;  text-align: center;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  width: 3.6rem;}
.icon-button span {  border-radius: 0;  display: block;  height: 0;  left: 50%;  margin: 0;  position: absolute;  top: 50%;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  width: 0;}.icon-button:hover span {  width: 3.6rem;  height: 3.6rem;  border-radius: 3.6rem;  margin: -1.8rem;}.twitter span {  background-color: #4099ff;}
/* Icons */.icon-button i {  background: none;  color: white;  height: 3.6rem;  left: 0;  line-height: 3.6rem;  position: absolute;  top: 0;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  width: 3.6rem;  z-index: 10;}.icon-button .icon-twitter {  color: #4099ff;}
.icon-button:hover .icon-twitter {  color: white;}

Conclusion

In this tutorial, you’ve learned how to customize buttons using CSS and a bit of Javascript if you need the “after click” function. You can also use CSS3ButtonGenerator to generate simple buttons. Feel free to ping me if you have any questions.

If you liked this article and if it helped you, do give some claps! ?