bavotasan.com » buttons http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Gradient Buttons with CSS3 http://bavotasan.com/2010/gradient-buttons-with-css3/ http://bavotasan.com/2010/gradient-buttons-with-css3/#comments Wed, 28 Apr 2010 16:32:35 +0000 c.bavota http://bavotasan.com/?p=1986 I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.

The only draw back to using some of these effects is that they are not 100% cross browser compatible. Check out this page in the latest versions of Firefox, Safari or Chrome to really see the effects in action.

I’m going to style an anchor tag for my button so first I need to create some HTML:

<a href="#" class="button">This is my button</a>

Now comes the fun part. Let’s start with the basic CSS necessary for our button:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	}

This is my button

Now let’s add some rounded corners:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	}

This is my button

Next comes the shadows:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	}

This is my button

And finally, the gradient:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
	}

This is my button

For fun, let’s add a active effect to make the button actually look like it is being pressed when you click on it:

a:active.button {
	box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	position: relative;
	top: 1px;
	left: 1px;
	}

This is my button

]]> http://bavotasan.com/2010/gradient-buttons-with-css3/feed/ 15 12 Free Illustrator Vector Buttons http://bavotasan.com/2008/12-free-illustrator-vector-buttons/ http://bavotasan.com/2008/12-free-illustrator-vector-buttons/#comments Thu, 27 Nov 2008 17:29:23 +0000 c.bavota http://bavotasan.com/?p=79 cool-buttonsI was messing around in Illustrator yesterday and decided to throw together my first free vector pack. I created 12 colourful buttons (tutorial coming soon) that can be used for any web design purpose.

Feel free to download them and use and/or abuse them to your hearts content. If you do use them for your website, please submit a link below so others can see how you incorporated them into your design.

]]> http://bavotasan.com/2008/12-free-illustrator-vector-buttons/feed/ 7