Creating Different Types of Buttons
On a web page, we see many types of buttons and with different shapes and sizes. So, here I am trying to explain how to create a few of them.
Step 1: Creating HTML Document
First of all, create an HTML page with a button tag (we can also use input tag with type="submit"
). But here we will apply CSS to button tag only, you can use it for submit button too.
Example
<button class="style">
Button
</button>
Which will look like this:
Step 2: Creating CSS Document
Now, we will add style to it using the CSS (cascaded style sheet).
Now take a look at the CSS document. We will add a background color property to it.
CSS
.style{
width:100px;
height:35px;
font-size:20px;
background:#3e9ad2;
}
Which will look like this:
Now Add Box-shadow property to it. As all browsers do not support CSS3, there are some vendor prefixes to work on particular browsers, hence we will add all of them.
CSS
-webkit-box-shadow:0 0 4px #000;
-moz-box-shadow:0 0 4px #000;
-o-box-shadow:0 0 4px #000;
-ms-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000;
}
Which will look like this:
Now, we will make the button with the rounded corners using border-radius property which is also a browser specific property.
CSS
-webkit-border-radius:15px;
-moz-border-radius:15px;
-o-box-border-radius:15px;
-ms-box-border-radius:15px;
border-radius:15px;
Which will look like this:
Now, we will add gradient effect to the button.
CSS
background-image:-webkit-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-moz-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-o-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-ms-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
Here is the final look of the button for you.
Hope you enjoyed it. Thank you.