Make a Creative Gradient and Colorful Buttons in 2 minute with source code
You can make two types of button. One is gradient type and another is solid color. Gradient button is so attractive and a uncommon button. Solid button is easy to make.
But gradient button needs some background pictures. You can make this background picture by Adobe illustrator, PowerPoint and other software. You can also use this background picture in your buttons.
Follow the step:
1. At first make a div and give it a class like "button".2. Set the property by CSS:
.button
{
width:
200px;
height:
60px;
border:
2px solid #9F9F9F;
font-size:
40px;
color:
white;
background-image:
url(co2.png);
background-size:
cover;
background-repeat:
no-repeat;
border-radius:
10px;
box-shadow:
1px 1px 3px black;
}
3.Now use hover property (you can
use your creativity):
.button:hover
{
box-shadow:
1px 1px 8px black;
cursor:
pointer;
}
4.Now use active property (you can
use your creativity):
.button:active
{
box-shadow:
1px 1px 1px black;
cursor:
pointer;
}
Here is the full code
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>Button
Design</title>
<style
type="text/css">
.button
{
width:
200px;
height:
60px;
border:
2px solid #9F9F9F;
font-size:
40px;
color:
white;
background-image:
url(co2.png);
background-size:
cover;
background-repeat:
no-repeat;
border-radius:
10px;
box-shadow:
1px 1px 3px black;
}
.button:hover
{
width:
200px;
height:
60px;
border:
2px solid #9F9F9F;
font-size:
40px;
color:
white;
background-image:
url(co2.png);
background-size:
cover;
background-repeat:
no-repeat;
border-radius:
10px;
box-shadow:
1px 1px 8px black;
cursor:
pointer;
}
.button:active
{
width:
200px;
height:
60px;
border:
2px solid #9F9F9F;
font-size:
40px;
color:
white;
background-image:
url(co2.png);
background-size:
cover;
background-repeat:
no-repeat;
border-radius:
10px;
box-shadow:
1px 1px 1px black;
cursor:
pointer;
}
.container
{
margin-top:
auto;
margin-bottom:
auto;
margin-left:
auto;
margin-right:
auto;
}
</style>
</head>
<body>
<div
class="container">
<div
align="center" class="button">
Click
</div>
</div>
</body>
</html>