How to Create CSS Button with 5 Steps

How to Create CSS Button with 5 Steps

 

Of the many questions that arise from the beginner in CSS is a question of "how the hell to create a button with CSS?", Hmmm ...... for me this is a simple question but the answer is complicated. There are many ways to answer this question, and unfortunately many the wrong way. At first I was learning to use CSS, and looking a little know much about the syntax of the problems I had made ​​me more aware, like almost everything I did was wrong. Today we will learn gradually step - step is simple and flexible that you can practice in the manufacture of buttons. And more importantly the end result is you get a deeper explanation on every point that we will do.
 
Step 1: HTML

Believe it or not this first step is the tricky step. For an experienced coder maybe this is an easy step, but for the beginner to know where the steps to start making your own buttons is quite difficult. Do you have to use the tag "<button>" in HTML? or may use the tag "<p>"? Tag which is more suitable to serve on the HTML button?

Most of the coder uses a simple step and the most in life is by using the tag "<a>" (if the form is usually used "<input>"). From the standpoint of functionality, which we will create is a link that when clicked will take the user to another page which is the basic function of a link. Often in web design, the choice to change something into a form button is just an aesthetic and not necessary to point out specific functions.

This is an HTML snippet of the most often used to create a button with a beautiful and perfect but still brief:

<a href="http://designshack.co.uk/" class="button">Click Me</a>

  If you do not need a "<div>", then do not use

Problems arise when I first started my coding is often used "<div>" in making any, you know? "Whatever". In this flawed logic I started by entering the tag "<a>" into the tag "<div>" and begun to include some style to the tag "<div>" is.

This is unnecessary and can cause problems when you click or hover on the button. In the example above, all the elements that we created is just a tag "<a>". If you insert the tag into the tag "<div>" then do the styling on the tag "<div>" will make the text of those links that can click or hover, meaning users will not get the what - what if you do click on button you made ​​as appropriate should the user clicks on the text, it would be a major deficiency in the website that you create.

    Why use a class?

Perhaps the most important functions that you realize this is a snippet of code we add the class to the tag "<a>", with the value "button". There are several reasons for this.

First, we must give this style to the tag without having to target all tag "<a>" on the page. It has been very sure you do not want all the buttons that link to be identical to each other. After all, you certainly want to use this button style repeatedly in the same page. For this reason we use a class instead of using the ID. That way, whenever you want to transform plain text into a button you simply add the class "button" in the HTML tag.

preview the first step :

Step 2: Style Basics On Button

Now we already have the HTML tag and is ready to proceed to the next step is CSS. You have to remember we make a class "button" for styling all links into button. So our first step is to prepare for the CSS code as below:

.button {/* Code Here */}

The first thing we want to do this in CSS is to define the basic box that we will create a form button. This is a step - a step style that I use. For the record this is the size and color of my choice that is entirely your right to change it to suit your needs.

.button {
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);
}

The most important thing I did here and you should notice is to set to "display" with value "block". This will make your link could be a box whose size is larger depending on the width and height you enter. After that please enter the size and base color you'll use, then add the border. I would suggest you use the "rgba" but if you want to make the code more friendly to older browsers, you can look at this article to create a fallback for your RGBA code.

Preview Step 2 :

Step 3: Style Text

Next is to change the text that appears with the ugly into better shape. To ensure you can keep up with changes at every step, I will still display the code that created in the previous step with the comment limit so that you know the position of each step.

.button {

 /*Langkah 2: Style Dasar Pada Button*/
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);

 /*Step 3: Style Teks*/
 color: rgba(0, 0, 0, 0.55);
 text-align: center;
 font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, 

        sans-serif;
}

/*Step 3: Style Link*/
a.button {
 text-decoration: none;
}

Here you can see I added the same color but a darker base color on the text. This trick is achieved by setting the color of black text and reduce the opacity via RGBA. Next, I created the text with text-align in the middle and give it some style using font attributes.

Preview Step 3:

 Step 4: Style CSS3

Previous step to take us to a form button is still better than before. Unfortunately this form is very boring. The most important part is the key should be able to perform perfectly in all major browsers, so now we will add some new CSS style is very interesting but without the worry with a poor display in older browsers. Basically, I do not care if IE if my button does not perform well in IE but at least my button can display most stylenya in IE without a significant decrease form.

You can add tens - twenty lines of code to make your button look luxurious and beautiful, but I still would make it simple for now.

.button {

 /*Langkah 2: Style Dasar Pada Button*/
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);

 /*Step 3: Style Teks*/
 color: rgba(0, 0, 0, 0.55);
 text-align: center;
 font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva,

 sans-serif;

 /*Step 4: Style CSS3*/
 background: linear-gradient(top, #34696f, #2f5f63);
 border-radius: 50px;
 box-shadow: 0 8px 0 #1b383b;
 text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}

/*Step 3: Style Link*/
a.button {
 text-decoration: none;
}

Each section of this code can sometimes be tricky so let's try to see one by one. First, I added a gradient that will display a given color as the darker shadow. I added a basic color attributes on it as a fallback.

Next up is the border radius. I decided to make this button has an elipse corner radius by using the border.

The latter is a shadow. I gave a good bit of shadow on the box or the text. For the box, I give shadow to the vertical without the horizontal offset. This will give a 3D effect that does not have to use the code length. For the text shadow, I also added a vertical offset and set the color to white with opacity 20%. This is the easiest way to create an effect as if sinking into the text.

Use Prefixr To Browser Prefixes

Remember the code above are not all compatible with multiple browsers. At the outset, I am very lazy to try and make my code run on the many browsers that are using a browser prefixes, and sometimes I forget the code that must be what it should be included.

Once I was sure that I made with the view of this, I can use a tool called Prefixr to process and refine my code if there are errors in other browsers display.

.button {

 /*Langkah 2: Style Dasar Pada Button*/
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);

 /*Step 3: Style Teks*/
 color: rgba(0, 0, 0, 0.55);
 text-align: center;
 font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva,

 sans-serif;

 /*Step 4: Style CSS3*/
 background: -webkit-linear-gradient(top, #34696f, #2f5f63);
 background: -moz-linear-gradient(top, #34696f, #2f5f63);
 background: -o-linear-gradient(top, #34696f, #2f5f63);
 background: -ms-linear-gradient(top, #34696f, #2f5f63);
 background: linear-gradient(top, #34696f, #2f5f63);

 -webkit-border-radius: 50px;
 -khtml-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;

 -webkit-box-shadow: 0 8px 0 #1b383b;
 -moz-box-shadow: 0 8px 0 #1b383b;
 box-shadow: 0 8px 0 #1b383b;

 text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}

/*Step 3: Style Link*/
a.button {
 text-decoration: none;
}

Preview Step 4 :

Step 5: Style Hover

The final step of making this button is to define a style for your mouse hover on the button. When the user puts the mouse cursor over the button you will be better if it shows little effect of the display button that makes you different is not just the mouse cursor changes shape. Once again, we can make this a simple and a bit of code.

.button {

 /*Langkah 2: Style Dasar Pada Button*/
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);

 /*Step 3: Style Teks*/
 color: rgba(0, 0, 0, 0.55);
 text-align: center;
 font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva,

 sans-serif;

 /*Step 4: Style CSS3*/
 background: -webkit-linear-gradient(top, #34696f, #2f5f63);
 background: -moz-linear-gradient(top, #34696f, #2f5f63);
 background: -o-linear-gradient(top, #34696f, #2f5f63);
 background: -ms-linear-gradient(top, #34696f, #2f5f63);
 background: linear-gradient(top, #34696f, #2f5f63);

 -webkit-border-radius: 50px;
 -khtml-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;

 -webkit-box-shadow: 0 8px 0 #1b383b;
 -moz-box-shadow: 0 8px 0 #1b383b;
 box-shadow: 0 8px 0 #1b383b;

 text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}

/*Step 3: Style Link*/
a.button2 {
 text-decoration: none;
}

/*Step 5: Style Hover*/
a.button:hover {
 background: #3d7a80;
 background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
 background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
 background: -o-linear-gradient(top, #3d7a80, #2f5f63);
 background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
 background: linear-gradient(top, #3d7a80, #2f5f63);
}

 Now if you put your mouse cursor over the button the color of the button you will change. This is a simple effect but enough to make the user aware of such changes even if they are color blind.

Completed.

may be useful :)

Posted in: html tutorial