[SOLUCIONADO] problema link boton redondo

[matake]

Hola,

Lo que intento hacer es un boton redondo en html - css que muestre en su interior un icono svg al cual se le puede cambiar el color fill dinamicamente (mouseover etc )
y todo esto dentro de una etiqueta a para ponerle un link.

Lo he conseguido de la siguente manera

Se puede ver en funcionamiento en un fiddle aqui

Código CSS:

.contenedor, .div_redondo, svg{
    display: inline-block;
    width: 25px;
    height: 25px;
}
.div_redondo{
    border-radius: 50%;
    vertical-align: middle;
    background: #000;
}
svg{
    position: relative;
    bottom: 25px;
    fill: #fff;
}
 

(he puesto dos botones iguales porque otros tienen el svg mas extenso )

Código HTML:

<a href="mi_link">
    <div class="contenedor">
        <div class="div_redondo"></div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
    </div>
</a>
 
<a href="mi_link">
    <div class="contenedor">
        <div class="div_redondo"></div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
    </div>
</a>
 

Hasta aqui todo parecia correcto hasta que me di cuenta que al mover el cursor por debajo del boton creado ( como un centimetro mas abajo ) el cursor se volvia manita como si la etiqueta a estuviese dos veces. Una vez sobre el boton y otra vez un poquito mas abajo pero sin nada visible ... solo al mover el raton se podia detectar.

Otra curiosidad es que esto no pasaba con el internet explorer.

He aislado el codigo de los botones que tenia para hacer pruebas y he encontrado otra curiosidad

yo tenia el html del boton que puse arriba generado dinamicamente sin espacios y saltos de linea pero nada mas al ponerlos en varias lineas me sale un simbolo "-" por debajo de los botones que creo que es el responsable de todo esto



¿Sabe alguien como resolver esto aunque sea de otra forma pero que funcione correctamente?

Gracias

[matake]

Lo he solucionado provisional con esto:

Código CSS:

a{
  float:left;
  width: 25px;
  height: 25px;
}
 

Ya hace tiempo que he intentado poner altura y anchura a la etiqueta "a" pero no funcionaba ... junto con el float si que parece que funciona

Todavia no lo voy a marcar como solucionado por si alguien tiene otra idea mejor porque esto me parece un poco como otra chapuza.

Saludos

[pzin]

Para poder especificar una altura a un enlace, primero tienes que convertirlo en un elemento de bloque, ya que por defecto es un elemento en linea y estos no aceptan alturas ni rellenos. Cuando flotas un elemento este automáticamente se convierte en elemento de bloque, de ahí que luego te funcionara.

De todas formas si haces cosas raras con tu HTML y/o CSS, ten por seguro que ocurrirán cosas raras.

¿Por qué si quieres poner un SVG dentro del círculo no lo pones dentro del elemento que hará de círculo? Claro, al no hacerlo, el SVG te queda por debajo del botón, y en vez de solucionarlo correctamente, lo que haces es ponerlo en una posición relativa y moverlo hacia arriba, pero el espacio que ocupaba el SVG, se sigue manteniendo. Y ese es el espacio fantasma que tienes ahí.

Lo del símbolo extraño que tienes, es simplemente el subrayado del enlace, solo tienes que indicar que no quieres subrayado.

Así que te quedaría algo así: https://jsfiddle.net/250az2ue/1/

Mi recomendación es que, para cosas así (enlaces con iconos) uses fuentes de iconos. Es más simple y el código te queda mucho más limpio. Puedes incluso creártelas tú mismo con herramientas online como IcoMoon.

[matake]

Muchas gracias por las dos sugerencias.

Joderrr ... me pregunto solo hasta que punto puedo ser tonto !!!!

Me refiero a esto:

¿Por qué si quieres poner un SVG dentro del círculo no lo pones dentro del elemento que hará de círculo?

Claro que era y es mas que logico , lo que pasó es que me he liado con un proyecto bastante extenso ... y de vez en cuando me preparo algunas cosas ( y las guardo separado hasta que las necesito ) y no se porque extraña razon a la hora de hacer el primer boton redondo no podia ver el svg al meterlo en el div que hace de circulo. Entonces por esto he optado por esta solucion posicionandolo sobre su contenedor y no dentro de el. Gracias otra vez por hacerme atento.

He probado ahora y me funciono a la primera.

Gracias tambien por la otra sugerencia (lo de fuentes de iconos) .
Voy a estudiarla en detalle. Si que vi algo sobre ello, pero necesito practicar un poquito antes de lanzarme.

Saludos