Create a CSS3 button in a simple way

This tutorial demonstrates how to create simple extensible buttons and use CSS3 attributes, such as border radius and linear gradient. Basic button class: first, we can create a basic button class without any color, so that we can use different colors .. Button {font-family: sans-serif; font-weight: bold; color: # fff; padding: 5px 10px 6px 10px;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;} in the preceding code, the boundary radius of the circular boundary is MOZILLA, webKit and Internet Explorer browsers. If you want to learn more about border radius property. Add different colors: now we have the basic structure of the rounded corner button. We can use different colors, because we may need to use buttons of the same color. By adding a simple background color, we can use the property linear gradient of CSS3 to create the gradient effect of the button. Example :. blue {background: # 0085cc; background-image:-moz-linear-gradient (top, # 0085cc, # 00717f); background-image:-webkit-gradient (linear, left top, left bottom, from (# 0085cc), to (# 00717f);} in the above Code, we create a simple gradient Mozilla and Webkit browser. We can also add background colors that do not support gradient properties. If you are not familiar with linear gradient properties. For hover, we can specify a simple background color, or if you want to, you can create a gradient hover like .. Blue: hover {background: # 00717f;} similarly, we can use our selected color, other color classes. See the demo page. I use different colors. Button size: we can define different types of buttons. All we need to do is specify the font size .. Small {font-size: 12px;}. medium {font-size: 18px;}. large {font-size: 24px;} finished! How do I use these buttons? The button can be used as <a class = "button large blue"> Click me! </A> <a class = "button medium blue"> Click me! </A> <a class = "button small blue"> Click me! </A>