Deze transition is een voorbeeld van progressive enhancement. In oude IE browsers is er nauwelijks iets van een effect te zien, maar niemand zal merken dat het (in moderne browsers) veel en veel beter kan. Om deze procedure op jouw pagina te "zetten", hoef je alleen maar de css code in de head-sectie van jouw pagina te plaatsen en de html regels (met de ul) in de body sectie van jouw pagina. Ik heb nog een soortgelijke procedure achter deze link geplaatst.
<style type="text/css">
ul{
list-style-type:none;
margin:30px 0 10px 100px}
ul a{
text-decoration:none;
color:#fff;
background:#000;
font-size:130%}
.transition{
letter-spacing:1px;
margin-top:-2px;
white-space:pre;
text-shadow: 1px 2px 1px #400;
display:block;
width:9em;
border:2px solid #000;
padding:4px 6px 4px 16px;
background:#f00;
color:#fff;
-moz-transition:all 0.1s ease-in-out;
-webkit-transition:all 0.1s ease-in-out;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px}
.transition:hover{
letter-spacing:2px;
background:#d00;
border-color:rgba(0,0,0,1.0);
-moz-transform:scale(1.04);
-webkit-transform:scale(1.04);
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px}
</style>
<ul>
<li><a href="http://kompoos.nl/css/text-effects/text-transition.html" class="transition">CSS text effect</a></li>
<li><a href="http://kompoos.nl/css/text-effects/text-transition.html" class="transition">Cross browser</a></li>
<li><a href="http://kompoos.nl/css/text-effects/text-transition.html" class="transition">Zonder plaatjes</a></li>
</ul>