1

Quisiera saber como se logra el efecto de agregar un circulo a un icono, así como este ejemplo dentro de gmail:

introducir la descripción de la imagen aquí

Entiendo que debo utilizar el evento "focus" dentro del icono; sin embargo, no tengo claro si es necesario crear un icono adicional (con el circulo alrededor) o simplemente con css se puede lograr este efecto.

4 respuestas 4

7

Si es muy facil, pare el efecto de cuando el mouse pase por encima seria con ´hover´, el focus es donde hay un foco de atención a traves de un click o alguna tecla. Para el circulo es agregar un ´padding´ al icono y darle un ´borde-radius´ del 50%. Te quedaria asi:

div{
  padding: 5px;
  background-color: #ddd;
}

div i{
  height: 30px;
  width: 30px;
  text-align: center;
  padding: 10px;
  margin: 0px 5px;
  color: #555;
  font-size: 28px;
}

div i:hover{
  border-radius: 50%;
  color: #fff;
  background-color: #333;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">

<div>
  <i class="fas fa-clipboard-check"></i>
  <i class="fas fa-user"></i>
  <i class="fas fa-cog"></i>
<div>

4

Asumiendo que tienes una imagen con transparencia, puedes hacer lo siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Efecto circulo</title>
  <style>
    .imagen {
      width: 100px;
      border-radius: 50%;

      transition: background .4s;
    }

    .imagen:hover {
      background: #DDD;
    }
  </style>
</head>
<body>
  <img class="imagen" src="https://cdn3.iconfinder.com/data/icons/common-3/100/opacity-512.png" alt="Imagen con opacidad">
</body>
</html>

En este ejemplo, el fondo de la imagen es establecido como un circulo por medio de:

border-radius: 50%;

Lo único que faltaría es cambiar el color de dicho fondo cuando el usuario ponga su ratón encima con:

.imagen:hover {
    background: cualquier-color-que-quieras;
}
1

Le agregué un efecto al background en hover, con la línea Transition: background 0.8s;

  
 div{
      padding: 5px;
      background-color: #ddd;
    }

    div i{
      border-radius:50%;
      height: 30px;
      width: 30px;
      text-align: center;
      padding: 10px;
      margin: 0px 5px;
      color: #555;
      font-size: 28px;
      
      transition: background .4s;
    }

    div i:hover{
      border-radius: 50%;
      color: #fff;
      background-color: #333;
      transition: background .4s;
    }
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">

    <div>
      <i class="fas fa-clipboard-check"></i>
      <i class="fas fa-user"></i>
      <i class="fas fa-cog"></i>
    <div>

1

Modifiqué los colores en plano y en hover a mi parecer, se ve mejor, pero pueden, personalizarlo a su estilo les dejo un link donde pueden encontrar el código de colores en hexadecimal (#C4C1C1) o rgb(193,193,193): https://htmlcolorcodes.com/es/ saludos amigos coders, Dios los bendiga.

div{
          padding: 5px;
          background-color: #ddd;
        }

        div i{
          border-radius:50%;
          height: 30px;
          width: 30px;
          text-align: center;
          padding: 10px;
          margin: 0px 5px;
          color: #777;
          font-size: 28px;

          transition: background .4s;
        }

        div i:hover{
          border-radius: 50%;
          color: #333;
          background-color: #C4C1C1;
          transition: background .4s;
        }
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">

        <div>
          <i class="fas fa-clipboard-check"></i>
          <i class="fas fa-user"></i>
          <i class="fas fa-cog"></i>
        <div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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