Botón como enlace o link Tipos

LuJo



Este punto debería haberlo colocado en efectos y códigos, pero es tan largo que lo coloco aquí como un mero apunte para entender la formación de un simple botón (o botón input).

En este caso se trata de hacer que un botón sea un link o enlace:

1. Lo primordial es saber que el código

<button> </button>

es el que da "la fórmula" de botón.

2. Añadir el código de enlace que suele ser:

<a href="URL DEL SITIO WEB"> </a>



Si queremos que se abra en una ventana aparte:

<a href="URL DEL SITIO WEB" target="_blank"> </a>


Resultado final:

<a href="URL DEL SITIO WEB"><button>AQUI EL TITULO DEL BOTONCITO</button></a>

(o con ventana aparte)

<a href="URL DEL SITIO WEB" target="_blank"><button>AQUI EL TITULO DEL BOTÓN</button></a>



3. Le otorgamos glamour dando color al botoncito y el código cambia sustancialmente:

<a href="URL DEL SITIO WEB"></a></span><a href="URL DEL SITIO WEB"><input name="button" value="TITULO BOTONCITO" style="color: #ffffff; background-color: #ff9900;" type="submit"></a>


P.ej:




- color: es el color del texto.

- background-color: es el color del fondo.


¿Qué pasa si buscas un botón más sofisticado?

■ Hay webs que hacen botones on line como GRSITES . Sí, te das un paseo por la web y "la imaginación al poder".


Botón con efecto "rollover"


Lo siguiente es una tontería, pero lo anoto para ver el funcionamiento de este tipo de combinaciones con onmouseover. Seguramente debería ir en tipos de enlaces y links...


<a href="URL DEL SITIO WEB"><img src="URL DE LA IMAGEN Nº 1" onmouseover="this.src='URL DE LA IMAGEN Nº 2'" onmouseout="this.src='URL DE LA IMAGEN Nº1'" alt="TITULO DEL BOTÓN"></a>


- La imagen nº1 es la que aparece sin pasar el cursor (en el ejemplo es Shin Chan con una flor en la boca).
- La imagen nº 2 es la que se ve al pasar el cursor por encima (en el ejemplo es el log donde se lee Lujo).

P.ej:

Blog de Lujo

El efecto es curioso y se le considera un botón con efecto "rollover".

En definitiva, no es más que un link que al pasarle el ratón por encima cambia de imagen y sale un cartelito con el nombre del sitio web indicado en el respectivo código.


Todo lo que está explicado puede ir en un gadget HTLM/javascript o en una entrada en Edición de HTLM.



► Botones para esconder u ocultar texto, códigos, enlaces...

Scrollbar para hacer el mismo efecto




Apuntes...





2 comentarios:

LadyMarian

Qué lindos lo botones! Pero nada como Shin Chan y Lujo alternándose. jajaja! Un truco divertido!

Besotes

Lujo

@LadyMarian,
Uy!!!, el que comentas lo realicé como prueba....Me he dado cuenta que muchos lo usan en espacios para captar publicidad.
Abrazotes!!

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP