0

tengo este estilo que obtuve de la pagina

https://cybmeta.com/formas-basicas-con-css-triangulos-circulos-trapecios-rectangulos-cuadrados

.circulo {
         width: 100px;
         height: 100px;
         -moz-border-radius: 50%;
         -webkit-border-radius: 50%;
         border-radius: 50%;
         background: #5cb85c;
    }

sin que deje de ser circulo, quiero darle un borde cuando le de click y que cuando sea hover se agrande un poco

y con esto lo aumento en el hover

.circle ul li a:hover {
    background-color: transparent;
    -webkit-transform:scale(1.3);transform:scale(1.3);
    cursor:pointer; 
    cursor: hand;
}

Menu

Como pueden ver en el centro en la parte de abajo esta el "circulo" y tiene centro blanco y borde rosado.

0

1 respuesta 1

1

Para que se agrande con el hover puedes usar lo que has hecho modificar las propiedades de width y height dentro del css que has hecho.

Por otra parte, para hacer el borde cuando hagas click puedes hacerlo de varias formas pero en todas utilizas javaScript.

Un ejemplo es haciendo una clase de css sólo para ese borde:

.borde {
border: solid 1px #000;
}

Y añadiéndola al círculo al hacer click mediante un js:

document.querySelector(".circle").onclick = function() {
    document.querySelector(".circle").addClass("borde");
}

Otra solución sería añdirle directamente la propiedad del borde mediante js:

document.querySelector(".circle").style.border= "solid 1px #000";
6
  • Voy a ensayar poniéndoselo desde el principio, para que aparezca con el borde desde que carga, porque me toca crear todo el evento del click, el 17 abr. 2018 a las 16:37
  • He añadido el evento click en la respuesta, se me había pasado, por si quieres verlo. Si prefieres que aparezca siempre, solo debes añadir el estilo del borde en el primer css que tienes, aunque sea circular se comporta como un cuadrado en cuanto a propiedades de css.
    – Rabegi
    el 17 abr. 2018 a las 16:47
  • tengo una duda, ya lo hace, pero si quiero aumentar el tamaño del borde me cubre la imagen central , añadiré a la pregunta a que debo llegar el 17 abr. 2018 a las 19:43
  • Ya lo añadí, en esa imagen ven como debe quedarse viendo, la cosa es que si aumento el tamaño del borde me cubre el original el 17 abr. 2018 a las 19:45
  • Sobre la sombra, como evito que se vea difuminada? use esta: box-shadow: 0px 0px 27px 25px #EA0B8C; el 17 abr. 2018 a las 21:45

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.