-
Cómo hacer botones personalizados para páginas Web
-
Todos los botones de estilo navegadores de manera diferente, pero usted puede hacer sus propios estilos personalizados para hacer sus botones correspondientes a su diseños web y se ven muy bien en la mayoría de los navegadores. Se necesita una combinación de código de Cascading Style Sheet (CSS) y HTML para crear botones personalizados. Las opciones son casi ilimitadas, y el uso de las 3 propiedades de nivel de CSS (CSS3) como "la frontera de radio" y "box-shadow" hacen que sea fácil crear botones redondeados con una sensación tridimensional.Instrucciones
1 Abre el archivo HTML en un editor de código o Microsoft Bloc de notas. Escribe el siguiente código para crear el botón:
<Tipo botón = "botón" class = "estilo"> Texto del botón </ botón>
2 Abra el archivo CSS externo, o escribir CSS entre "<style>" etiquetas ubicadas en la cabecera de su archivo HTML. Escribe este código para dirigirse a cualquier botón con el nombre de la clase de "estilo":
.stylish {}
3 Establecer las propiedades de fondo y de frontera para el botón en el CSS. Los navegadores ya botones de estilo con un fondo gris y un borde biselado, por lo que debe sustituir dicho estilo. Este código establece esas propiedades:
.stylish {
fondo: # ff0000;
frontera: 1px solid # cc0000;
}
El código anterior crea un botón con un fondo de color rojo brillante y un rojo más oscuro, borde de un píxel de ancho.
4 Estilo de la fuente para el botón de la siguiente manera:
.stylish {
fondo: # ff0000;
frontera: 1px solid # cc0000;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: cursiva;
de color: #ffffff;
}
El código anterior establece el texto botón para utilizar el tipo de letra "Arial" en negrita y cursiva y utiliza el color blanco.
5 Crear esquinas redondeadas para su botón mediante el uso de la propiedad "border-radius", de la siguiente manera:
.stylish {
la frontera de radio: 20px;
}
6 Dele a su botón de un gradiente de fondo para que parezca tridimensional. Aquí está el código:
.stylish {
fondo: # ff0000;
fondo: lineal gradiente (arriba, # ff0000, # 990000);
fondo: -webkit-lineal de gradiente (arriba, # ff0000, # 990000);
}
Debe utilizar tanto "lineal-degradado" y "webkit-lineal de gradiente" para hacer que el gradiente en Chrome 11. Establecer un fondo de color por primera vez para los navegadores que no soportan gradientes. También puede crear una imagen de gradiente y establecer el fondo de la siguiente manera:
background: url (ruta / a / gradient.png) # ff0000;
7 Ponga una gota de sombra en el botón para darle más profundidad. Aquí está el código:
.stylish {
box-shadow: # 550000 2px 2px 10px;
}
El código hexadecimal "# 550000" crea un color rojo oscuro de la sombra paralela. Las siguientes dos valores de establecer el desplazamiento de la parte superior ya la izquierda del botón. El último valor es el radio de desenfoque que controla la cantidad de desenfoque que desea para la sombra.
Consejos y advertencias
- Propiedades como la "frontera de radio" y "box-shadow", junto con los gradientes lineales, no funcionan en los navegadores antiguos. Considere permitir que sus diseños web para poder funcionar fácilmente en estos navegadores para que el visitante se utiliza Internet Explorer 8 verá un botón sólido con esquinas redondeadas no.
