Tecnología

Inicio

Cómo hacer botones sin imágenes en CSS

Antes de navegadores comenzaron a añadir CSS 3, o en cascada nivel Style Sheets 3, el apoyo, la creación de una abertura necesaria botón no predeterminado un editor de gráficos y el diseño del botón como una imagen en primer lugar utilizando código complicado. En CSS3, puede crear botones con esquinas redondeadas, degradados y sombras sin ningún tipo de imágenes necesarias. Si bien este método utiliza unas cuantas líneas de código CSS, todavía hará que sus páginas Web más rápido que si se ha utilizado imágenes.

Instrucciones

1 Añadir un par de "botón <>" etiquetas para el código HTML de la página Web y darles un nombre de clase. Coloque el texto del botón entre ellos:

<Clase de botón = "Noimage"> Mi botón </ botón>

2 Abra el archivo de hoja de estilo CSS para la página Web. Si todavía no tiene uno, guardar un archivo en blanco como "miestilo.css" y añadir este código después de la "<title>" etiquetas en la página Web:

<Link rel = "stylesheet" href = "miestilo.css" type = "text / css" />

Guarde el archivo CSS para la misma carpeta que la página Web o cambiar "href" para que coincida con la ruta de acceso al archivo.

3 Crear una nueva regla de estilo para la clase del botón:

.Sin imágen {
}

4 Estilo del botón con un color de fondo y la nueva frontera:

.Sin imágen {
background-color: # ff0061;
frontera: 1px solid # a70040;
la frontera de radio: 10px;
}

En este ejemplo se crea un botón de un rosa con un borde de un píxel más oscuro en todo. Los "frontera de radio" curvas de propiedad de la frontera; Los valores más grandes en esta propiedad indican más redondeo.

5 Crear un gradiente de este botón. Esto ayuda a darle al botón de un aspecto tridimensional:

Imagen de fondo: lineal gradiente (arriba, # ff0061, # b90047);
Imagen de fondo: -webkit-lineal de gradiente (arriba, # ff0061, # b90047);
Imagen de fondo: -moz-linear-gradiente (arriba, # ff0061, # b90047);

Se necesitan tres versiones del código de gradiente, todos ellos el mismo código, pero dos de ellos con diferentes prefijos navegador. El prefijo "webkit" afecta a Chrome y Safari, mientras que "-moz" afecta a Firefox. En este ejemplo se crea un gradiente de base de arriba a abajo.

6 Añadir una gota de sombra detrás del botón utilizando la propiedad "box-shadow":

box-shadow: 2px 2px 10px RGBA (0,0,0,0.2);

Los dos primeros valores de desplazamiento de la sombra de la izquierda y la parte superior. El tercer valor especifica la cantidad de desenfoque sombra. Un código de color RGBA toma valores de rojo, verde y azul para los colores, además de un valor de 0 a 1 para la opacidad. El ejemplo muestra negro con una opacidad del 20 por ciento.

7 Estilo del texto dentro del botón. Cambiar el color, la fuente y el estilo de fuente, según sea necesario. Añadir una sombra paralela al texto usando "text-shadow":

de color: #ffffff;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px 3px RGBA (0,0,0,0.2);

La propiedad "text-shadow" funciona de la misma manera como "box-shadow".

8 Dele a su botón de algo de relleno de tamaño que en relación con el texto:

padding: 15px 10px;

El primer valor es el relleno horizontal, mientras que el segundo valor es vertical. Aquí está el código del botón final:

.Sin imágen {
background-color: # ff0061;
frontera: 1px solid # a70040;
la frontera de radio: 10px;
Imagen de fondo: lineal gradiente (arriba, # ff0061, # b90047);
Imagen de fondo: -webkit-lineal de gradiente (arriba, # ff0061, # b90047);
Imagen de fondo: -moz-linear-gradiente (arriba, # ff0061, # b90047);
box-shadow: 2px 2px 10px RGBA (0,0,0,0.2);
de color: #ffffff;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px 3px RGBA (0,0,0,0.2);
padding: 15px 10px;
}

Consejos y advertencias

  • Añadir el nombre de la clase que ha creado para el botón para cualquier otro botón que desea revisar en este estilo sin imágenes.

Artículos relacionados