Эффект круга сзади в значке, переместив мышь кверху

Я хотел бы знать, как удается эффекту добавления круга к значку, также как и этого примера внутри gmail:

introducir la descripción de la imagen aquí

Я понимаю, что я должен использовать событие "focus" внутри значка; однако, я не осознаю, необходимо ли создавать добавочный значок (с кругом вокруг) или просто с css возможно добиваться этого эффекта.

1
задан 03.07.2018, 20:43
2 ответа

Он agreguГ© эффект в background в hover, с нею 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
ответ дан 20.11.2019, 07:50

ModifiquГ© цвета в плоскости и в hover в меня казаться, оказывается лучше, но они могут, настраивать это в Ваш стиль оставило им соединение, где они могут находить cГіdigo цветов в шестнадцатеричном (#C4C1C1) или rgb (193,193,193): https://htmlcolorcodes.com/es / дружелюбных типов привета coders, Бог благословил их.

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>
1
ответ дан 20.11.2019, 07:50