Create a Multi Color and Size CSS3 Buttons

Posted by on June 8th in Tutorials.

Today we are going to create some CSS3 Buttons which are available in multi color and size.  There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.

First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.

<a class="button small red" href="#"><span>Button</span></a>

Now as we have completed with the markup, now we need to have our css3 codes to style our buttons, so first of all we need to style our buttons padding, hover effect, gradient effect and active effect. So lets follow the below codes to get the clear idea about it. I dont want to go into the details of css codes coz i know its simple to follow just by seeing into it. So just Check out the below css3 codes.

.button, .button span {
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.button {
	white-space: nowrap;
	line-height:1em;
	position:relative;
	outline: none;
	overflow: visible; /* removes extra side padding in IE */
	cursor: pointer;
	border: 1px solid #999;/* IE */
	border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
	border-bottom:rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .1) 0%,
		rgba(0, 0, 0, .1) 100%
	);/* FF3.6 */
	background: -webkit-gradient(
		linear,
		center bottom,
		center top,
		from(rgba(0, 0, 0, .1)),
		to(rgba(255, 255, 255, .1))
	);/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
	-moz-user-select: none;
	-webkit-user-select:none;
	-khtml-user-select: none;
	user-select: none;
	margin-bottom:10px;
}
.button.full, .button.full span {
	display: block;
}
.button:hover, .button.hover {
	background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .2) 0%,
		rgba(255, 255, 255, .1) 100%
	);/* FF3.6 */
	background: -webkit-gradient(
		linear,
		center bottom,
		center top,
		from(rgba(255, 255, 255, .1)),
		to(rgba(255, 255, 255, .2))
	);/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
	top:1px;
}
.button span {
	position: relative;
	color:#fff;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
	border-top: rgba(255, 255, 255, .2) 1px solid;
	padding:0.6em 1.3em;
	line-height:1em;
	text-decoration:none;
	text-align:center;
	white-space: nowrap;
}

Now we need to style for the different size of buttons.. so lets follow the below codes for different sizes of buttons.

.button.small span {
	font-size:12px;
}
.button.medium span {
	font-size:14px;
}
.button.large span {
	font-size:18px;
}

Now the styles for different color buttons..

.button.black {
	background-color: #333333;
}
.button.gray {
	background-color: #666666;
}
.button.white {
	background-color: #FFFFFF;
}
.button.white span{
	color: #666666;
}
.button.red {
	background-color: #e62727;
}
.button.orange {
	background-color: #ff5c00;
}
.button.magenta {
	background-color: #A9014B;
}
.button.yellow {
	background-color: #ffb515;
}
.button.blue {
	background-color: #00ADEE;
}
.button.pink {
	background-color: #e22092;
}
.button.green {
	background-color: #91bd09;
}
.button.rosy {
	background-color: #F16C7C;
}
.button.brown {
	background-color: #804000;
}
.button.purple {
	background-color: #800080;
}
.button.cyan {
	background-color: #46C7C7;
}
.button.gold {
	background-color: #D4A017;
}

Finally Check out the Demo

Different Sizes

Small Medium Large

Different Colors

gold cyan purple brown rosy green pink blue yellow magenta orange Medium gray black
You can easily check out our best quality 640-816 prepare you well for the real SY0-301 exam. You can also get success in real exam of testking 70-642 with the quality 646-205 dumps questions and 646-230 dumps answers.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

24 Comments

  1. [...] Create a Multi Color and Size CSS3 Buttons [...]

  2. very sweet man thank you

  3. [...] (Tutorial) Create a Grid Image Gallery that has Intersecting Highlights with jQuery and CSS →Create a Multi Color and Size CSS3 Buttons (Tutorial) Create a Multi Color and Size CSS3 Buttons →CSS3 Imageless Floating Feedback Button (Tutorial) [...]

  4. [...] Create a Multi Color and Size CSS3 Buttons (Tutorial) [...]

  5. [...] Create a Multi Color and Size CSS3 Buttons (Tutorial) [...]

  6. [...] Create a Multi Color and Size CSS3 Buttons (Tutorial) [...]

  7. Hey there, very helpful resource ! It seems that you are releasing this code, but i wanted to make sure. Do we have the license to use and modify this source code ?

  8. [...] our previous post below.20 Cool CSS3 Navigation and Menu TutorialsUseful CSS3 Tutorials From 2011Create a Multi Color and Size CSS3 ButtonsCSS3 Forms TutorialsCreate a Stylish Contact Form with HTML5 & CSS3Create a Slick CSS3 Login [...]

  9. [...] tutorials you might also want to check out our previous post below.Useful CSS3 Tutorials From 2011Create a Multi Color and Size CSS3 ButtonsSome Awesome CSS3 GeneratorsCreate Animated Landscape using Pure CSS3CSS3 Navigation and Menu [...]

  10. [...] Create a Multicolor and Size CSS3 Button [...]

  11. [...] Create a Multi Color and Size CSS3 Buttons [...]

  12. [...] Create a Multi Color and Size CSS3 Buttons [...]

  13. [...] Animated Menu  Spin those Icons with CSS3  Photobooth with PHP, jQuery and CSS3  Create a Multi Color and Size CSS3 Buttons  How To Create a Stylish Button Entirely with CSS3  Create a Grid Based Web Design in [...]

  14. [...] 4. Create a Multi Color and Size CSS3 Buttons [...]

  15. [...] Make a Multi Color and Size CSS3 Buttons [...]

  16. [...] Create a Multi Color and Size CSS3 Buttons [...]

  17. These buttons display great in Internet Explorer as well, which I’ve been having problems with. I’m definitley using this code for a call to action button I need. Thanks for the help. You saved me a lot of head ache.

  18. [...] Create a Multicolor and Size CSS3 Button [...]

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.