BG transition

Tengo una duda que la verdad que no puedo resolverla solo.
Quiero ponerle a los botones una animacion de opacidad. Osea, que aparzcan mas transparentes y cuando pases el click se hagan 100% visibles.

No le encuentro la vuelta con transition.
Pongo la imagen como bg? inserto la imagen con <img>?

Muchisimas gracias! Saludos!.

Ponlo como background.
Primero tienes que hacer tu botón completo como si no tuviera animación, ya que así lo verán todos los que usen navegadores que no aceptan transition, con ambos estados, luego le agregas el transition usando la propiedad opacity.

Código HTML :

.boton {
    width: 100px;
    height: 24px;
    background: url(boton.png) top right no-repeat;
    opacity: 0.6; /* por decir algo */
    transition: opacity 200ms linear; /* tambien se pone aqui para que se regrese a su estado original con animacion tambien */
}
.boton:hover {
    opacity: 1;
    transition: opacity 200ms linear;
}

Aparte recuerda ponerle todos los prefijos de navegadores ya que eso aún esta en pruebas:
-moz- | -webkit- | -o-

Lo que deberías hacer es usar la propiedad opacity de CSS.

Buenisimo, muchisimas gracias gente!

Disculpen que joda demasiado, tengo otro problema...
Quiero poner una ventana que sería el "portal" de noticias o de lo que sea dentro de un section que se llama principal. El tema es que no me lo centra... digamos, yo le pongo margin para todos los lados y me toma nada más los del costado, y además si le doy una medida a la caja no me la toma se me estira a lo ancho de todo el #principal.

Código HTML :

#principal
{
   width:760px;
   margin-left:auto;
   margin-right:auto;
   height:600px;
   background-image: url(bg-01.png);
   background-repeat: repeat-y;
   background-position: center;
   padding: auto;
   }   

#portal
{
   border-radius: 0.9em;
   widht:400px;
   height: 300px;
   background:#789C8B;
   margin:2em;
   padding:1em;
   }

Muchas gracias, si quieren que deje imágenes diganme.
Saludos!

Pon esa parte del codigo HTML tambien para ver la estructura, usa las etiquetas de codigo.

Nota: Cuando los 4 valores de medida de una propiedad son iguales (arriba, derecha, abajo e izquierda) pon el valor una sola vez, eso se aplica solo a todos.

Código :

.selector { margin: 4px; } /*los 4 lados */
.selector { margin: 10px 30px; } /*10 arriba/abajo, 30 lados */

No entendí... es lo mismo poner eso, osea se escribe diferente pero es lo mismo.
No entiendo la solucion

saludos.

Escribes menos!

Código :

border-radius: 0.9em 0.9em 0.9em 0.9em;

es mucho mas que

Código :

border-radius: 0.9em;

Y hacen exactamente lo mismo!

¿Podemos ver la página en alguna parte?.