Efect dublu icon buton

[Angrry.exe™]

In this tutorial I will show you how to make a button that has 2 icons:

The first step is to add the following codes to where you want the button to appear:

<div class = "icon">
  <i class = "important material-icons"> announcement </ i> <i class = "ok material-icons"> check </ i>
</ Div>
Then go to the global .css site and add the following codes:

.icon {
  width: 160px;
  height: 160px;
  border-radius: 15px;
  background: # e91e63;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  overflow: hidden;
  transition: background .25s ease-in-out;
  cursor: pointer;
  transform: translateZ (0);
}
.icon> i {
  border-radius: 15px;
  overflow: hidden;
}
.icon i.ok {
  color: white;
  font-size: 100px;
  width: 100%;
  height: 100%;
  line-height: 160px;
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
  transform: translate3d (-150%, -100%, 0);
  transition: all .25s ease-in-out;
  / * Weird, hacky, long-shadow * /
}
.icon i.ok :: after {
  content: '';
  position: absolute;
  top: 98px;
  left: 65px;
  transform: rotated (45deg);
  width: 150px;
  height: 70px;
  background: rgba (0, 0, 0, 0.125);
  z-index: -1;
}
.icon i.important {
  color: white;
  font-size: 100px;
  width: 100%;
  height: 100%;
  line-height: 160px;
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
  transform: translate3d (0, 0, 0);
  transition: all .25s ease-in-out;
  / * Weird, hacky, long-shadow * /
}
.icon i.important :: before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -33px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  background: # e91e63;
  display: block;
  z-index: -1;
  transition: inherit;
}
.icon i.important :: after {
  content: '';
  position: absolute;
  top: 76px;
  left: 56px;
  transform: rotated (45deg);
  width: 150px;
  height: 114px;
  background: rgba (0, 0, 0, 0.125);
  z-index: -2;
}
.icon: hover {
  background: # 4caf50;
}
.icon: hover i.important {
  transform: translate3d (150%, 0, 0);
}
.icon: hover i.important :: before {
  background: # 4caf50;
}
.icon: hover i.ok {
  transform: translate3d (0, -101%, 0);
}