Efecto para crear botones con CSS

Publicado por nachox on Septiembre 16, 2008

Con un poco de imaginación y CSS, podemos crear un menú con botones para nuestro sitio. Es un sencillo código al cual puedes carmbiarle los valores del color de fondo, tipo de letra, tamaño, etc. Totalmente personalizable a tu gusto.

menu-css1.jpg

El código CSS es el siguiente:

.linkboton {
font-family: arial, verdana, sans-serif;
font-size: 10pt;
font-weight: bold;
padding: 5px;
background-color: #CC0000;
color: #FFFFFF;
text-decoration: none;
}
.linkboton:link,
.linkboton:visited {
border-top: 1px solid #cccccc;
border-bottom: 2px solid #666666;
border-left: 1px solid #cccccc;
border-right: 2px solid #666666;
}
.linkboton:hover {
border-bottom: 1px solid #cccccc;
border-top: 2px solid #666666;
border-right: 1px solid #cccccc;
border-left: 2px solid #666666;
}

Y luego el código necesario para llamar al menú desde un archivo HTML:

<a href="#" class="linkboton">Enlace</a>

3 Comments to “Efecto para crear botones con CSS”

  1. Ahau
    0:47 es Septiembre 16th, 2008

    Hombre,una pequeña sujerencia.. podrias haber puesto una demo de como queda que no sea precisamente una imagen de captura.. sino que se vea que es un boton hecho con css.

    saludos!

  2. Rosdany
    23:54 es Julio 5th, 2009

    La adapté para Botones semejantes a los de Windows y me trabajo fantásticamente bien… si quieres el código de adaptación… avísame… muchas gracias nachox…

  3. Rosdany
    23:57 es Julio 5th, 2009

    Ahhh!!!… se me olvidó preguntarte como habilitar y deshabilitar el respectivo botón … si fuera necesario… estoy tratando de encontrar el camino para lograr esto con este código… ahi te aviso si lo logro… si lo tienes… pues mejor… gracias

Deja tu Comentario!