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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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