Material icons

by michananya

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

      
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">delete</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">search</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">add</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">edit_mode</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">chat</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">done</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">close</i>
  </div>
</a>
<a href="#">
  <div class="icon-bg">
    <span></span>
    <i class="material-icons">clear_all</i>
  </div>
</a>

<br/><br/><br/>
<div style="display: inline-block">
  <a href="#" class="btn">
      <i class="material-icons">chat</i>
    <span>Comment</span>
  </a>
    <a href="#" class="btn">
      <i class="material-icons">delete</i>
    <span>Delete</span>
  </a>
</div>

CSS

body { 
  padding: 50px;
  font-family: 'Open Sans', sans-serif;

}
a {
  display: inline-block;
  outline: none;
  font-size: 14px;
  color: #266268;

  text-decoration: none;
}
a:hover .icon-bg span {
  background-color: rgba(0,0,0,0.04);
  color: #1F4D55;
  height: 40px;
  width: 40px;
  top: 0;
  left: 0;
}
a:hover, a:focus .icon-bg i {
  color: #1F4D55;
}
.icon-bg {
  position: relative;
  margin: 0 -9px;
}
a:focus .icon-bg span  {
  background-color: rgba(38,98,104,0.2);
  height: 40px;
  width: 40px;
  top: 0;
  left: 0;
}
a:active .icon-bg span  {
  background-color: rgba(38,98,104,0.3);

}

.icon-bg  span {
  position: absolute;
  height: 2px;
  width: 2px;
  top: 19px;
  left: 19px;
  height: 0px;
  width: 0px;
  display: inline-block;
  border-radius: 50%;
  outline: none;
  font-weight: 600;
  text-decoration: none;
  color: #266268;
  font-size: 18px !important; /* 24px preferred icon size */
  display: inline-block;    
  transition: all ease-out 0.2s;
}

i {
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 11px;
  border-radius: 50%;
  outline: none;

  color: #266268;
  font-size: 18px !important; /* 24px preferred icon size */

}
a:hover *, a:focus * {
    color: #1F4D55!important;
}
a > span {
  padding: 11px 0; 
}
a > * {
  vertical-align: middle;
  display: inline-block;
}

.btn {
  height: 34px;
  max-width: 40px;
  padding: 1px 1px 7px 1px;
  border-radius: 22px;
  Border: 1px solid #D2DFDF;
  transition: width 0.5s ease;
  overflow: hidden;
}
.btn > span {

}
.btn:hover {
  max-Width: auto;
  overflow: visible;
}
.btn:hover > span {
  padding-right: 10px;
  ;  
}