Essex web design

Css3 makes it quick and simple to apply various new styles to your css stylesheet to achieve great effects. Css3 isn't fully supported by all browsers so most designer tend to use the new css rules if they can degrade nicely in browsers such as Internet explorer. For this tutorial we'll be using the new rules, css gradient, css text-shadow & css rounded corners.

All you need to do is create yourself an anchor link with the class "button". Next you need to apply the following css rules to your stylesheet for the desired effect.

a.button {
	margin:10px 0;
	display:block;
	padding:15px 25px;
	width:75px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-size:12px;
	/* styling for chrome */
	background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(183,241,71)),
    color-stop(0.63, rgb(220,255,100))
	);
	/* styling for firefox */
	background-image: -moz-linear-gradient(
    center bottom,
    rgb(183,241,71) 25%,
    rgb(220,255,100) 63%
 
	);
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-shadow:1px 1px 0 #91c232;
}

We can now add a hover effect to our button, I've just reversed the gradient and removed the test shadow but you can try adding a new gradient colour, or a box shadow maybe.

a.button:hover {
	text-shadow:none;
	background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(220,255,100)),
    color-stop(0.63, rgb(183,241,71))
	);
	/* styling for firefox */
	background-image: -moz-linear-gradient(
    center bottom,
    rgb(220,255,100) 25%,
    rgb(183,241,71) 63%
	);
}