CSS3 Effects For Quality Websites

Rounded Corners, Drop Shadow, Text Shadow and Transition

These CSS3 features are probably the most popular among developers while add a professional touch. Notice how the other color fades in subtle on hover.
Hover Me
The HTML:

Hover Me

The CSS

a.button-css3 {
	display: inline-block;
	padding: 30px 80px;
	border: 1px solid #bac4ae;
	background: #d6e1c7;
	color: #2a231b;
	font-size: 18px;
	text-align: center;
        text-shadow: 1px 1px 0px #989f8e;
        filter: dropshadow(color=#989f8e, offx=1, offy=1);
	-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	border-radius: 8px;
  	-webkit-box-shadow: -1px 4px 8px 1px #989f8e;
	-moz-box-shadow: -1px 4px 8px 1px #989f8e;
	box-shadow: -1px 4px 8px 1px #989f8e;
}

The CSS for Hover/Focus state. For faster fade-in choose a lower number then 0.4s:

a.button-css3:hover, a.button-css3:focus {
        background: #d0dcc0;
	color: #ba5a28;
	-webkit-transition: all 0.4s ease-in;
  	-moz-transition: all 0.4s ease-in;
         transition: all 0.4s ease-in;
}

CSSS3 Gradients

When you create gradients the secret is to make them smooth with very similar colors.
Here is a CSS3 generator that can save you a lot of time and which allows you change gradient orientation and/or add stop points: http://gradients.glrzad.com/
Hover me to see the effect.
The HTML:

Button Link

The CSS:

div#container a.gradient-css3 {
  background: #d6e1c7;
  background: -moz-linear-gradient(top, #d6e1c7 0%, #c3ceb4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6e1c7), color-stop(100%, #c3ceb4));
  background: -webkit-linear-gradient(top, #d6e1c7 0%, #c3ceb4 100%);
  background: -o-linear-gradient(top, #d6e1c7 0%, #c3ceb4 100%);
  background: -ms-linear-gradient(top, #d6e1c7 0%, #c3ceb4 100%);
  background: linear-gradient(top, #d6e1c7 0%, #c3ceb4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6e1c7', endColorstr='#c3ceb4',GradientType=0 );
}

For the on click states we just need to reverse colors:

div#container a.gradient-css3:active {
  background: #c3ceb4;
  background: -moz-linear-gradient(top, #c3ceb4 0%, #d6e1c7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3ceb4), color-stop(100%, #d6e1c7));
  background: -webkit-linear-gradient(top, #c3ceb4 0%, #d6e1c7 100%);
  background: -o-linear-gradient(top, #c3ceb4 0%, #d6e1c7 100%);
  background: -ms-linear-gradient(top, #c3ceb4 0%, #d6e1c7 100%);
  background: linear-gradient(top, #c3ceb4 0%, #d6e1c7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3ceb4', endColorstr='#d6e1c7',GradientType=0 );
}

Pulsating Buttons

Pulsating buttons can be a great way to attract attention. Again, the secret is to make them subtle.
Hover Me for Pulse Effect
The HTML:

Hover Me for Pulse Effect

The CSS:

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }
  50% {
    -ms-transform: scale(1.1);
  }
  100% {
    -ms-transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }
  50% {
    -o-transform: scale(1.1);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse-css3:hover, .pulse-css3:focus {
  -webkit-animation: pulse 1s linear infinite;
  -moz-animation: pulse 1s linear infinite;
  -ms-animation-name: pulse 1s linear infinite;
  -o-animation-name: pulse 1s linear infinite;
  animation-name: pulse 1s linear infinite;
}

Tranforms

With CSS3 transforms you can create all kind of interesting effects from scaling an element to rotate and move it.
Hover to Rotate and Scale
The HTML:

Hover to Rotate and Scale

The CSS:

/* transform */
.transform-css3:hover, .transform-css3:focus {
  -moz-transform: scale(0.95) rotate(10deg) translate(25px);
  -webkit-transform: scale(0.95) rotate(10deg) translate(25px);
  -o-transform: scale(0.95) rotate(10deg) translate(25px);
  transform: scale(0.95) rotate(10deg) translate(25px);
}

Final Thoughts

These are just few examples of what’s possible with CSS3 and it should give you an idea on how you can make an improved browsing experience for your websites.
P.S for front-end developers – To make it easier to implement all the vendor prefixes I use LESS which saves a lot of development time and I highly recommend it. lesscss.org