WC


You are not connected. Please login or register

 posted: 1

» on Mon Aug 06, 2012 3:48 am

avatar

Admin
In this tutorial I will learn you how to style buttons making full use of css.
Example:
You can also make them link somewhere:
Example: (links to Google).

Making a button is easy:
Spoiler:
Code:
<button> Text </button>
Output:
That already makes a button for you.
But mostly this button is very ugly so you can style it.

To get the button just like above paste this code into your HTML:


HTML Code
Code:
<button style="background-color: rgb(0, 116, 204);background-image: -moz-linear-gradient(center top , rgb(0, 136, 204), rgb(0, 85, 204));background-repeat: repeat-x;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);color: rgb(255, 255, 255);text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);padding: 6px 6px;font-size: 15px;line-height: normal;border-radius: 5px 5px 5px 5px;display: inline-block;margin-bottom: 0px;text-align: center;vertical-align: middle;vertical-align: middle;border-width: 1px;border-style: solid;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;">Button</button>

Output:


You can also do it another way.
First paste this in your CSS:

CSS
You can put individual stuff in it:
Code:
.bluebutton {
background-color: rgb(0, 116, 204);background-image: -moz-linear-gradient(center top , rgb(0, 136, 204), rgb(0, 85, 204));background-repeat: repeat-x;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);color: rgb(255, 255, 255);text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);padding: 6px 6px;font-size: 15px;line-height: normal;border-radius: 5px 5px 5px 5px;display: inline-block;margin-bottom: 0px;text-align: center;vertical-align: middle;vertical-align: middle;border-width: 1px;border-style: solid;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Now just simply paste this in your HTML:
Spoiler:
Code:
<button class="bluebutton"> Text </button>



Let's start from scratch

Paste this in your HTML:
Code:
<button class="button1"> Button </button>

Now let's create the shape, border-radius and border for our button.
Add this to your css:
Code:
.button1 {
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 4px 4px 4px 4px;
}
This creates an output of:

Normal:


Ofcourse we want this button to have a cool background.
To create a cool gradient background you should visit this link. It can create very cool gradient backgrounds.

I chose for this background: (add to your css)
Code:
.button1 {
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 4px 4px 4px 4px;
background: #ff3019;
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

Output:

Normal:


Now let's finalize the button,
adding padding, text-color, box shadow, text shadow. Changing the size of the button.

Add this to the css for .button1:
Code:
padding: 6px 6px;
color: white;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);

Output:

Normal:




I hope this helped you a bit on styling your buttons!
Good luck!

http://webcoders.actieforum.com

 posted: 2

» on Mon Aug 06, 2012 3:50 am

avatar

Admin
Buttons overview

-Blue button
CSS & HTML:
Spoiler:


CSS
Code:
.bluebutton {
background-color: rgb(0, 116, 204);background-image: -moz-linear-gradient(center top , rgb(0, 136, 204), rgb(0, 85, 204));background-repeat: repeat-x;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);color: rgb(255, 255, 255);text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);padding: 6px 6px;font-size: 15px;line-height: normal;border-radius: 5px 5px 5px 5px;display: inline-block;margin-bottom: 0px;text-align: center;vertical-align: middle;vertical-align: middle;border-width: 1px;border-style: solid;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}


HTML
Code:
<button class="bluebutton> Button </button>





-Red button
CSS & HTML:
Spoiler:

CSS
Code:
.redbutton {
border: 1px solid; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-radius: 4px 4px 4px 4px;background: #ff3019;background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );padding: 6px 6px;color:white;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
}


HTML
Code:
<button class="redbutton> Button </button>

http://webcoders.actieforum.com

Permissions in this forum:
You cannot reply to topics in this forum