CSS3 Gradient Buttons

Why use CSS3 gradients?

  • You can decrease your site’s load time by replacing images with css. Removing images will reduce the number of calls a browser makes to the web server. Typically, the fewer amount of calls to a web server, the faster a website will load.
  • The gradient will fill the entire html element. You will no longer have to worry about creating gradient images of different sizes because you can create one css class and use it across multiple elements
  • IE 10+
  • Firefox 3.6+
  • Chrome 10+
  • Safari 5.1+
  • Opera 11.6+
  • What does the gradient css look like?

    /*Chrome / Safari*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00D400), to(#006300));
    background: -webkit-linear-gradient(top, #00D400, #006300);
    
    /*Firefox*/
    background: -moz-linear-gradient(top, #00D400, #006300);
    
    /*IE*/
    background: -ms-linear-gradient(top, #00D400, #006300);
    
    /*Opera*/
    background: -o-linear-gradient(top, #00D400, #006300);
    

    Preview

    HTML

    You can use any html element that you want to create the button. As long as you give it the class of “color and button” you will be good to go! For demonstration I figured it would be easiest if I displayed the CSS on a <a> tag.

    <a class="green button" href="#">Button</a>
    

    CSS

    .green{
    	/*Fallback color for older browsers*/
    	background-color:#00D400;
    	
    	/*CSS3 Gradient*/
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00D400), to(#006300));
    	background: -webkit-linear-gradient(top, #00D400, #006300);
    	background: -moz-linear-gradient(top, #00D400, #006300);
    	background: -ms-linear-gradient(top, #00D400, #006300);
    	background: -o-linear-gradient(top, #00D400, #006300);
    	
    	/*Font color*/
    	color:white;
    	
    	/*Border style*/
    	border:1px solid #00A100;
    }
    .green:hover{
    	/*Fallback color for older browsers*/
    	background-color:#00E600;
    	
    	/*CSS3 Gradient code*/
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00E600), to(#006300));
    	background: -webkit-linear-gradient(top, #00E600, #006300);
    	background: -moz-linear-gradient(top, #00E600, #006300);
    	background: -ms-linear-gradient(top, #00E600, #006300);
    	background: -o-linear-gradient(top, #00E600, #006300);
    }
    .green:active{
    	/*Fallback color for older browsers*/
    	background-color:#00D400;
    	
    	/*CSS3 Gradient code*/
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00D400), to(#006300));
    	background: -webkit-linear-gradient(top, #00D400, #006300);
    	background: -moz-linear-gradient(top, #00D400, #006300);
    	background: -ms-linear-gradient(top, #00D400, #006300);
    	background: -o-linear-gradient(top, #00D400, #006300);
    }
    .button{
    	text-align:center;
    	padding:5px 16px 5px 13px;
    	cursor:pointer;
    	text-decoration:none;
    	-webkit-border-radius: 7px; 
    	-moz-border-radius: 7px;
    	border-radius: 7px;
    }
    

    Additional colors

    .blue{
    	background-color:#00B9FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00B9FF), to(#0046FF));
    	background: -webkit-linear-gradient(top, #00B9FF, #0046FF);
    	background: -moz-linear-gradient(top, #00B9FF, #0046FF);
    	background: -ms-linear-gradient(top, #00B9FF, #0046FF);
    	background: -o-linear-gradient(top, #00B9FF, #0046FF);
    	color:white;
    	border:1px solid #009EFF;
    }
    .blue:hover{
    	background-color:#00D2FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00D2FF), to(#0046FF));
    	background: -webkit-linear-gradient(top, #00D2FF, #0046FF);
    	background: -moz-linear-gradient(top, #00D2FF, #0046FF);
    	background: -ms-linear-gradient(top, #00D2FF, #0046FF);
    	background: -o-linear-gradient(top, #00D2FF, #0046FF);
    	color:white;
    	border:1px solid #009EFF;
    }
    .blue:active{
    	background-color:#00B9FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00B9FF), to(#0046FF));
    	background: -webkit-linear-gradient(top, #00B9FF, #0046FF);
    	background: -moz-linear-gradient(top, #00B9FF, #0046FF);
    	background: -ms-linear-gradient(top, #00B9FF, #0046FF);
    	background: -o-linear-gradient(top, #00B9FF, #0046FF);
    	color:white;
    	border:1px solid #009EFF;
    }
    .red{
    	background-color:#F50000;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F50000), to(#8C0000));
    	background: -webkit-linear-gradient(top, #F50000, #8C0000);
    	background: -moz-linear-gradient(top, #F50000, #8C0000);
    	background: -ms-linear-gradient(top, #F50000, #8C0000);
    	background: -o-linear-gradient(top, #F50000, #8C0000);
    	color:white;
    	border:1px solid #E50000;
    }
    .red:hover{
    	background-color:#FF2320;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF2320), to(#8C0000));
    	background: -webkit-linear-gradient(top, #FF2320, #8C0000);
    	background: -moz-linear-gradient(top, #FF2320, #8C0000);
    	background: -ms-linear-gradient(top, #FF2320, #8C0000);
    	background: -o-linear-gradient(top, #FF2320, #8C0000);
    	color:white;
    	border:1px solid #E50000;
    }
    .red:active{
    	background-color:#F50000;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F50000), to(#8C0000));
    	background: -webkit-linear-gradient(top, #F50000, #8C0000);
    	background: -moz-linear-gradient(top, #F50000, #8C0000);
    	background: -ms-linear-gradient(top, #F50000, #8C0000);
    	background: -o-linear-gradient(top, #F50000, #8C0000);
    	color:white;
    	border:1px solid #E50000;
    }
    .purple{
    	background-color:#BE00FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BE00FF), to(#570059));
    	background: -webkit-linear-gradient(top, #BE00FF, #570059);
    	background: -moz-linear-gradient(top, #BE00FF, #570059);
    	background: -ms-linear-gradient(top, #BE00FF, #570059);
    	background: -o-linear-gradient(top, #BE00FF, #570059);
    	color:white;
    	border:1px solid #A200A6;
    }
    .purple:hover{
    	background-color:#BE38FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BE38FF), to(#570059));
    	background: -webkit-linear-gradient(top, #BE38FF, #570059);
    	background: -moz-linear-gradient(top, #BE38FF, #570059);
    	background: -ms-linear-gradient(top, #BE38FF, #570059);
    	background: -o-linear-gradient(top, #BE38FF, #570059);
    	color:white;
    	border:1px solid #A200A6;
    }
    .purple:active{
    	background-color:#BE00FF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BE00FF), to(#570059));
    	background: -webkit-linear-gradient(top, #BE00FF, #570059);
    	background: -moz-linear-gradient(top, #BE00FF, #570059);
    	background: -ms-linear-gradient(top, #BE00FF, #570059);
    	background: -o-linear-gradient(top, #BE00FF, #570059);
    	color:white;
    	border:1px solid #A200A6;
    }
    .white{
    	background-color:#FFFFFF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E0E0E0));
    	background: -webkit-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -moz-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -ms-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -o-linear-gradient(top, #FFFFFF, #E0E0E0);
    	color:black;
    	border:1px solid #B7B7B7;
    }
    .white:hover{
    	background-color:#FFFFFF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CFCFCF));
    	background: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
    	background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
    	background: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
    	background: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
    	color:black;
    	border:1px solid #B7B7B7;
    }
    .white:active{
    	background-color:#FFFFFF;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E0E0E0));
    	background: -webkit-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -moz-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -ms-linear-gradient(top, #FFFFFF, #E0E0E0);
    	background: -o-linear-gradient(top, #FFFFFF, #E0E0E0);
    	color:black;
    	border:1px solid #B7B7B7;
    }
    .black{
    	background-color:#595959;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#595959), to(#000000));
    	background: -webkit-linear-gradient(top, #595959, #000000);
    	background: -moz-linear-gradient(top, #595959, #000000);
    	background: -ms-linear-gradient(top, #595959, #000000);
    	background: -o-linear-gradient(top, #595959, #000000);
    	color:white;
    	border:1px solid #404040;
    }
    .black:hover{
    	background-color:#696969;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#696969), to(#000000));
    	background: -webkit-linear-gradient(top, #696969, #000000);
    	background: -moz-linear-gradient(top, #696969, #000000);
    	background: -ms-linear-gradient(top, #696969, #000000);
    	background: -o-linear-gradient(top, #696969, #000000);
    	color:white;
    	border:1px solid #404040;
    }
    .black:active{
    	background-color:#595959;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#595959), to(#000000));
    	background: -webkit-linear-gradient(top, #595959, #000000);
    	background: -moz-linear-gradient(top, #595959, #000000);
    	background: -ms-linear-gradient(top, #595959, #000000);
    	background: -o-linear-gradient(top, #595959, #000000);
    	color:white;
    	border:1px solid #404040;
    }
    .orange{
    	background-color:#ffa300;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa300), to(#ff6400));
    	background: -webkit-linear-gradient(top, #ffa300, #ff6400);
    	background: -moz-linear-gradient(top, #ffa300, #ff6400);
    	background: -ms-linear-gradient(top, #ffa300, #ff6400);
    	background: -o-linear-gradient(top, #ffa300, #ff6400);
    	color:white;
    	border:1px solid #FF8700;
    }
    .orange:hover{
    	background-color:#FFB800;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFB800), to(#ff6400));
    	background: -webkit-linear-gradient(top, #FFB800, #ff6400);
    	background: -moz-linear-gradient(top, #FFB800, #ff6400);
    	background: -ms-linear-gradient(top, #FFB800, #ff6400);
    	background: -o-linear-gradient(top, #FFB800, #ff6400);
    	color:white;
    	border:1px solid #FF8700;
    }
    .orange:active{
    	background-color:#F29C00;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa300), to(#ff6400));
    	background: -webkit-linear-gradient(top, #ffa300, #ff6400);
    	background: -moz-linear-gradient(top, #ffa300, #ff6400);
    	background: -ms-linear-gradient(top, #ffa300, #ff6400);
    	background: -o-linear-gradient(top, #ffa300, #ff6400);
    	color:white;
    	border:1px solid #FF8700;
    }
    

    View demo here: Demo