Diseñar botones

[bichomen]

Hola, estoy diseñando unos botones y tengo un problemita, ¿como hago para que cuando pulse un botón, no se desplace los otros botones?

Podeis ver el código y el funcionamiento en codepen:

http://codepen.io/bichomen/pen/kkZxyw

Saludos!!


bichomen

[Ito79]

Hola,
Lo que le pasa es que cuando pinchas estás estableciendo un borde de 1px al botón y eso hace que desplace al resto (ya que tiene que poner el pixel adicional).

Esta es la linea que crea el border (dentro de div#contenedor div.boton:active)

Código CSS:

border: 1px solid #BDBDBD;
 

Con eliminarlo no se te desplaza pero claro, pierdes el borde, ¿te sirve?

Un saludo
Ito

[Ito79]

Si no quieres quitarle el borde, simplemente puedes ponerle un borde cuando no está seleccionado, del mismo grosor y entonces no se moverá:

Por ejemplo, un borde transparente sería:

Código CSS:

border: 1px solid rgba(0, 0, 0, .0);
 

Espero que sirva,
Un saludo

Ito

[bichomen]

Gracias Ito79, había otra solución, poner:

Código CSS:

border: 1px solid transparent;
 

Ahora lo que estoy intentando es que las letras se muevan al presionar el botón, ya que se quedan fijas, estoy probando a poner la propiedad

Código CSS:

transform: translate(x,y)
 

a algunas subclases de a, pero de momento no funciona.


bichomen

[AngelKrak]

Lo que necesitas mover son las letras no todo el div no?

Fijate si es lo que quieres
http://codepen.io/anon/pen/QKmjkG?editors=1100