Botones en forma de enlace para la web

En la zona de la columna lateral tengo colocados algunos botones. No tienen nada especial; botones si más ni más.

Lo que me llamó la atención en su momento fue el código y hoy sí que se pueden ver en la mayoría de navegadores actualizados.

1. Nos vamos a:

Diseño>Edición de HTML>expandimos artilugios

2. Busca la etiqueta </b:skin> y coloca antes:


.btn1 a {

width: 250px;

padding: 10px 25px 10px 25px;

font-family: Arial;

font-size: 16px;

text-decoration: none; color: #ffffff;

text-shadow: -1px -1px 2px #618926;

background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));

border: 1px solid #618926;

border-radius: 3px; -moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.btn1 a:hover {

text-shadow: -1px -1px 2px #465f97;

background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));

border: 1px solid #0f2557;

}

3. Guarda la plantilla


4. Allí donde se quiera introducir habrá que añadir un código:

- En un post se coloca en la zona del redactado en la pestaña "Edición de HTML"
- En la sidebar, footer u otra parte que lo permita necesita un gadget HTML/Javascript.


<span class="btn1"><a href="url">Texto del botón</a></span>

¿Qué podemos modificar?

- width: colocar el nº que nos convenga.

- padding: es el margen del centro hacia los extremos (más o menos) y se pueden modificar los cuatro datos.

- font-family: la pijada de colocar un tipo u otro de letra como Verdana, Times...

- font-size: tamaño de la letra.

- text-shadow: La sombra del texto y el color.

- background: modificar colorines.

- border: El grosor del borde y color.

- border-radius: Hacer las punta redondeadas con CSS.

Risas



• ¡¡¡¡Cuidado!!! Se puede rizar el rizo usando la misma técnica como indica J.Miur que a su vez lo recoge de otra web...Será por inventos.

La diferencia es que llevan una imagen de fondo algo transparente del tipo overlay.png....pero como todo en la vida es prescindible. Es cuestión de jugar.

1. Nos vamos a:

Diseño>Edición de HTML>expandimos artilugios

2. Busca la etiqueta </b:skin> y coloca antes:

El código que usa:


.button, .button:visited { /* botones genéricos */

  background: #222 url(URL_overlay.png) repeat-x;

  display: inline-block;

  padding: 5px 10px 6px;

  color: #FFF;

  text-decoration: none;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

  border-bottom: 1px solid rgba(0,0,0,0.25);

  position: relative;

  cursor:pointer

}

.button:hover { /* el efecto hover */

  background-color: #111

  color: #FFF;

}

.button:active{  /* el efecto click */

  top: 1px;

}



/* botones pequeños */

.small.button, .small.button:visited {

  font-size: 11px ;

}



/* botones medianos */

.button, .button:visited,.medium.button, .medium.button:visited {

  font-size: 13px;

  font-weight: bold;

  line-height: 1;

  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

}



/* botones grandes */

.large.button, .large.button:visited {

  font-size:14px;

  padding: 8px 14px 9px;

}



/* botones extra grandes */

.super.button, .super.button:visited {

  font-size: 34px;

  padding: 8px 14px 9px;

}

Se coloca en cada botón un color determinado:


.pink.button { background-color: #E22092; }

.pink.button:hover{ background-color: #C81E82; }



.green.button, .green.button:visited { background-color: #91BD09; }

.green.button:hover{ background-color: #749A02; }



.red.button, .red.button:visited { background-color: #E62727; }

.red.button:hover{ background-color: #CF2525; }



.orange.button, .orange.button:visited { background-color: #FF5C00; }

.orange.button:hover{ background-color: #D45500; }



.blue.button, .blue.button:visited { background-color: #2981E4; }

.blue.button:hover{ background-color: #2575CF; }



.yellow.button, .yellow.button:visited { background-color: #FFB515; }

.yellow.button:hover{ background-color: #FC9200; }

3. Guarda la plantilla


4. Allí donde se quiera introducir habrá que añadir un código:

- En un post se coloca en la zona del redactado en la pestaña "Edición de HTML"
- En la sidebar, footer u otra parte que lo permita necesita un gadget HTML/Javascript.


<a href="#" class="small button orange"> botón naranja pequeño </a>

<a href="#" class="medium button blue"> botón azul mediano </a>

<a href="#" class="large button red"> botón rojo grande </a>

<a href="#" class="super button pink"> botón rosa exra grande </a>