body{
  padding: 0;
  margin: 0;
  background-color: var(--color-background);
  transition: 2s;
}



.theme-light {
	transition: 2s;
  --color-background: #f2f3f7;
  --color-button: #f2f3f7, 0;
  --color-icon: #03c04a; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}

.theme-dark {
	transition: 2s;
  --color-background: #575757;
  --color-button: #575757, 0;
  --color-icon: #03c04a; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

.theme-light-pink {
	transition: 2s;
  --color-background: #f2f3f7;
  --color-button: #f2f3f7, 0;
  --color-icon: #ff69b4; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}
.theme-dark-pink {
	transition: 2s;
  --color-background: #575757;
  --color-button: #575757, 0;
  --color-icon: #ff69b4; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

.theme-light-orange {
	transition: 2s;
  --color-background: #f2f3f7;
  --color-button: #f2f3f7, 0;
  --color-icon: #ffa500; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}

.theme-dark-orange {
	transition: 2s;
  --color-background: #575757;
  --color-button: #575757, 0;
  --color-icon: #ffa500; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

.theme-light-red {
	transition: 2s;
  --color-background: #f2f3f7;
  --color-button: #f2f3f7, 0;
  --color-icon: #c0034a; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}

.theme-dark-red {
	transition: 2s;
  --color-background: #575757;
  --color-button: #575757, 0;
  --color-icon: #c0034a; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

.middle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.btn{
  display: inline-block;
  width: 225px;
  height: 225px;
  background: var(--color-button);
  margin: 10px;
  border-radius: 30%;
  box-shadow: 
	-2px -2px 8px var(--var1),
	-2px -2px 12px var(--var2), 
	inset 2px 2px 4px var(--var3),
	2px 2px 4px var(--var4);
  color: var(--color-icon);
  overflow: hidden;
  position: relative;
  font-size: 65px;
  }
  
.btn:hover {
	box-shadow: 
	inset -2px -2px 8px var(--var1),
	inset -2px -2px 12px var(--var2),
	inset 2px 2px 4px var(--var3),
	inset 2px 2px 4px var(--var4);
	font-size: 63px;
}

.btn i{
  line-height: 225px;
  
  transition: 0.0s linear;
}
 // .btn:hover i{
  transform: scale(1.3);
  color: var(--color-icon-hover); 
} //
 .btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: var(--color-button-hover);
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
} 
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
} 
 @keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
} 

.btn2{
  display: inline-block;
  width: 113px;
  height: 113px;
  background: var(--color-button);
  margin: 10px;
  border-radius: 100%;
  box-shadow: 
	-2px -2px 8px var(--var1),
	-2px -2px 12px var(--var2),
	inset 2px 2px 4px var(--var3),
	2px 2px 4px var(--var4);
  color: var(--color-icon);
  overflow: hidden;
  position: relative;
  font-size: 33px;
  
}

.btn2:hover {
	box-shadow: 
	inset -2px -2px 8px var(--var1),
	inset -2px -2px 12px var(--var2),
	inset 2px 2px 4px var(--var3),
	inset 2px 2px 4px var(--var4);
	 font-size: 31px;
}
.btn2 i{
  line-height: 113px;
 
  transition: 0.0s linear;
}
// .btn2:hover i{
  transform: scale(1.3);
  color: var(--color-icon-hover);
} //
.btn2::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: var(--color-button-hover);
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn2:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}

FF69B4 03c04a 343434 333333 03c04a