ubiquitour.com

Cómo hacer botones personalizados para páginas Web

Todos los navegadores estilo botones diferentemente, pero usted puede hacer sus propios estilos personalizados para hacer los botones coincidan con sus diseños Web y se ven muy bien en la mayoría de los navegadores. Necesita una combinación de código HTML y hojas de estilo en cascada (CSS) para crear botones personalizados. Las opciones son casi ilimitadas, y el uso de CSS nivel 3 (CSS3) propiedades como "border-radius" y "box-shadow" hacen fácil crear botones redondeados con una sensación tridimensional.

Instrucciones

1 Abra el archivo HTML en un editor de código o Notepad de Microsoft. Escriba el código siguiente para crear tu botón:

< botón tipo = "botón" class = "elegante" > texto del botón < / botón >

2 Abrir el archivo CSS externo, o escribir CSS entre etiquetas "< estilo >" situados en la cabeza de su archivo HTML. Escriba este código para cualquier botón con el nombre de la clase de "elegante":

{.stylish}

3 Establecer las propiedades de fondo y borde del botón en CSS. Los navegadores ya estilo botones con fondo gris y un borde biselado, por lo que debe sobrescribir ese estilo. Este código establece las propiedades:

{.stylish}

fondo: #ff0000;

frontera: 1px sólido #cc0000;

}

El código anterior crea un botón con un fondo rojo brillante y un rojo más oscuro, borde de un píxel de ancho.

4 Estilo de la fuente para el botón como este:

{.stylish}

fondo: #ff0000;

frontera: 1px sólido #cc0000;

font-family: Arial, sans-serif;

font-weight: bold;

estilo de letra: cursiva;

color: #ffffff;

}

El código anterior establece el texto de botón para usar la fuente "Arial" en negrita cursiva y utiliza el color blanco.

5 Crear esquinas redondeadas para su botón utilizando la propiedad "border-radius", como sigue:

{.stylish}

frontera-radius: 20px;

}

6 Dar el botón un fondo degradado para hacerla parecer tridimensional. Aquí está el código:

{.stylish}

fondo: #ff0000;

fondo: lineal-gradient(top, #ff0000, #990000);

fondo: - webkit-lineal-gradient(top, #ff0000, #990000);

}

Debe utilizar ambos "degradado lineal" y "- webkit - lineal-degradado" para hacer el trabajo degradado en Chrome 11. Ajustar el fondo de un solo color para los navegadores que no soportan gradientes. También puede crear una imagen degradada y establecer el fondo como este:

fondo: URL(path/to/gradient.png) #ff0000;

7 Poner una sombra en su botón para darle más profundidad. Aquí está el código:

{.stylish}

Box-shadow: 10px de 2px 2px #550000;

}

El código hexadecimal "#550000" crea un color rojo oscuro para la sombra paralela. Los dos siguientes valores establecen el desplazamiento de la parte superior e izquierda del botón. El último valor es el radio de desenfoque que controles mucho desdibujan le quiero para la sombra.

Consejos y advertencias

  • Propiedades como "border-radius" y "box-shadow," junto con los gradientes lineales, no funcionan en navegadores antiguos. Considerar lo que sus diseños Web degradar correctamente en estos navegadores para que un visitante utilizando Internet Explorer 8 veamos un botón sólido con esquinas no redondeadas.