Este es un efecto que se produce cuando colocamos el puntero del ratón sobre un objeto, es habitual verlo por ejemplo en botones con enlaces, normalmente el efecto que se produce es que al colocar el puntero sobre el botón éste cambia de color.
Llevo mucho tiempo intentando reproducir este efecto sobre los objetos de Activinspire pero el software no admite esta propiedad.
Por lo que se me ocurrió que tal vez se podría crear un botón para enlazar con páginas web utilizando la herramienta HTML incrustado…
Aquí os muestro el ejemplo que he realizado, veréis el efecto al poner el puntero del ratón encima.

Enlace web

Para reproducir el ejemplo simplemente debéis copiar el siguiente código y pegarlo en Insertar -> Vínculo -> HTML incrustado…
<style>
a.botonRGBA {
background-color: #00FF7F;/* Color de fondo inicial */
border: 5px solid #1E90FF;/* Ancho y color del borde */
color: #FF4500;/* color del texto */
display: block;
margin: 0 auto;
font-size: 16px;/* Tamaño de la fuente */
font-family: Arial;
font-weight: bold;
text-decoration:none;
padding: 10px;/* variando este valor se consigue un cambio de tamaño proporcional */
text-align: center;/* alineación del texto (left,center,right) */
width: 150px;/* Ancho del botón */
}
a.botonRGBA:hover {
color: #00FF7F;/* Color del texto en el efecto */
background-color: rgba(220, 20, 60, 1);/* color de fondo en el efecto */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DC143C,
endColorstr=#DC143C);/* Color de fondo en el efecto */
}
</style>
<a class="botonRGBA" href="#">Enlace Web;</a>


Os dejo una breve explicación al lado de algunas de las líneas del código, en ellas podéis hacer modificaciones que casi todas se refieren al color de cada elemento del botón, ese color tiene  que estar indicado con su valor hexadecimal. Podéis tener una tabla en la Wikipedia.

Sólo hay un sitio donde hay que poner el color RGB (background-color: rgba) para luego poner ese mismo color dos veces en hexadecimal un par de líneas después.

En la última línea donde pone href="#" tenéis que sustituir # por la URL de la página y el texto Enlace a una web por el que queráis que aparezca en el botón.

Promethean
Ahora simplemente tenéis que ir haciendo pruebas de color para tener estupendos botones.

Deja un comentario