-
Cómo personalizar el botón de entrada
-
Botones de entrada más comúnmente permiten que un visitante del sitio Web para presentar el contenido de una forma - cualquier cosa, desde una caja simple contacto con una solicitud de empleo en línea. El uso de hojas de estilo en cascada y un conocimiento básico de HTML, puede personalizar estos botones para aparecer como quiera.Instrucciones
1 Abra el archivo de código fuente para su formulario en el Bloc de notas u otro editor de texto o HTML.
2 Crear una hoja de estilo escribiendo en el siguiente dentro de la sección <head> del archivo directamente bajo el <title> línea:
<Style type = "text / css">
</ Style>3 Informe a su hoja de estilo que va a ser la creación de un estilo para los elementos <input> con el botón de "mi-botón de" clase insertando la siguiente entre las dos líneas <style>:
input.my-botón {}
Para que esto funcione exactamente, había que declarar el "mi-botón de" clase en el botón de envío. Se podía usar cualquier nombre de clase que desea; "Mi-botón" es sólo un ejemplo.
4 Personalizar el botón de entrada al declarar reglas entre llaves, terminando cada regla con un punto y coma. Para empezar, cambiar la anchura y la altura del botón utilizando el "ancho" y "altura" atributos:
input.my-botón {
Anchura: 200px;
altura: 100px;
}5 Cambiar el color del botón utilizando el "background-color" atributo, y el color del texto con el atributo "color":
background-color: negro;
color amarillo;6 Cambiar el borde del botón con el atributo "frontera". En el interior de la frontera atributo se puede declarar el ancho del borde en píxeles, tipo - punteado, guiones, etc. --y de color:
frontera: 4PX discontinua de color amarillo;
7 Cambiar la apariencia de la fuente utilizando atributos tales como el "font-size", "text-transform" y "font-family" atributos:
font-size: 30px;
font-family: Trebuchet MS;
text-transform: mayúsculas;8 Utilizar una imagen de fondo personalizado con el atributo "Imagen de fondo". Guarda la imagen en el escritorio como button.jpg. Deshacerse del valor "background-color" y ajuste "frontera" en 0 en el archivo de código fuente:
Imagen de fondo: url ( 'button.jpg');
border: 0;Consejos y advertencias
- Encuentra más hojas de estilo atribuye a utilizar para personalizar los botones de entrada mirando por encima de la lista de referencia CSS desarrollador de Mozilla Red (ver Recursos).
