Cómo hacer una búsqueda más interesante Button en CSS

Si desea llamar la atención sobre un botón de búsqueda en su sitio web, usted no tiene que hacerlo parpadear colores rojos brillantes para captar la atención de un visitante del sitio. - botones de búsqueda utilizados para encontrar contenido dentro de una página web o en Internet - a menudo aparecen en lugares visibles cerca de la parte superior de una página. Para transformar ordinarios botones de búsqueda en obras de arte interesantes, añadir atributos CSS para los botones y los hacen parecer como quieras.

Instrucciones

1 Abrir un documento de página Web que contiene un botón de búsqueda. Localiza la sección del cuerpo del documento, y encontrar la etiqueta de entrada que crea el botón. Esa primera parte del código de la etiqueta será similar al código que se muestra a continuación:

<Input type = "button"

Añadir el texto siguiente después de "botón":

class = "newSearchButton"

Después de la adición de esa clase, el código aparecerá como sigue:

<Input type = "button" class = "newSearchButton" value = "Buscar" />

2 Mover a la sección de cabecera del documento y pega el código CSS se muestra a continuación en esa sección:

<Style type = "text / css">
.newSearchButton
{
altura: 50px; Anchura: 100px; padding: 4 píxeles;
color rojo; background-color: amarillo;

Este código crea la clase CSS newSearchButton y define algunos atributos. Estos atributos afectan a la apariencia del botón de diferentes maneras. Los valores de altura y anchura controlan el tamaño del botón. Los valores que se muestran aquí son en píxeles. La altura del botón, por ejemplo, es de 50 píxeles. El atributo de relleno determina hasta qué punto aparece el texto del botón de los bordes del botón. Los atributos de color y el fondo de color conjunto del botón de primer plano y color de fondo.

3 Añadir el texto que figura a continuación después de que el texto que se muestra en el paso anterior:

frontera de estilo: corriendo; border-width: 3px; border-color: azul;
font-weight: bold; font-style: cursiva;
font-family: Arial, Helvetica, sans-serif;
}
</ Style>

Este código añade atributos adicionales. Los tres atributos en la primera línea sistema del estilo del borde del botón, el ancho y el color. Los atributos de la segunda línea definen la fuente del botón. En este ejemplo, el peso de la fuente es negrita y su estilo está en cursiva. La última línea define los nombres de fuente que desea que el botón para utilizar. Especificar más de un nombre para el atributo font-family. Si el navegador de un usuario no puede representar la primera fuente de la lista - Arial, en este caso - el navegador intenta utilizar una de las otras fuentes de la lista.

4 Guarde el documento y el lanzamiento de su navegador para poder verla como una página Web. Su nuevo botón aparecerá en la página donde se presentan los atributos definidos en el CSS.

Consejos y advertencias

• El número de posibles estilos botones es casi interminable, debido al número de atributos que se pueden establecer. Cambiar el valor del estilo de frontera para la inserción y el ancho del borde de 10px y el aspecto del botón cambia dramáticamente. Se adquiere un borde grueso, en tres dimensiones con una ligera sombra en sus bordes superior e izquierdo. Continuar para asignar valores diferentes a los diferentes atributos y ver los cambios en un navegador. Es posible que descubra accidentalmente un efecto sorprendente que añade sólo el toque final que busca.