Button Hover Animation

HTML

<div class="main">
	<div class="search">
		<button class="icon" id="icon">hover me</button>
		<!--<input type="text" id="text"/>-->
    <button class="icon1" id="icon1">hover me</button>
    <button class="icon2" id="icon2">hover me</button>
    <button class="icon3" id="icon3">hover me</button>
    <button class="icon4" id="icon4"><span>hover me</span></button>
	</div>
</div>

SCSS

.mainStyle{
  width: 125px; height: 45px; background: white; border-radius: 4px;
  position: relative; overflow: hidden; border: 2px solid white; color: #333; cursor: pointer;
}
.style{
  position: absolute; transition: all 0.3s ease-in;
}


body{
  background: #2ecc71;
}
.main{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.search{
	position: relative;
  button{
    margin-bottom: 5px;
  }
}
.icon, .icon1, .icon2, .icon3, .icon4{
	@extend .mainStyle;
}
.icon:before{
    @extend .style; content: ''; width: 200px; height: 100px;
    z-index: -1; transform: translate(-50%,-50%);
    opacity: 0;left: 50%; top: 50%; border: 2px solid #fcd04b;
}
.icon:hover:before{
  @extend .style; z-index: 1; transform: translate(-50%,-50%); width: 110px; border-radius: 4px;
  height: 30px; opacity: 1;left: 50%; top: 50%; border: 2px solid #fcd04b; transition: all 0.3s ease-out;
}

/****************** icon1 *****************************/

.icon1:before{
    @extend .style; background: #f06060; content: ''; width: 60px;
    height: 60px; left: -70%;
    opacity: 0; top: 50%; transform: translateY(-50%) rotate(12deg);
}
.icon1:after{
    @extend .style; background: #f06060; content: ''; width: 60px;
    height: 60px; right: -70%;
    opacity: 0;transform: translateY(-50%) rotate(12deg); top: 50%;
}
.icon1:hover:before{
  @extend .style; transform: translateY(-50%) rotate(12deg);
  top: 50%; width: 60px; height: 60px; opacity: 1; left: -50%; padding: 10px;
}
.icon1:hover:after{
  @extend .style; transform: translateY(-50%) rotate(12deg);
  top: 50%; width: 60px; height: 60px; opacity: 1; right: -50%; padding: 10px;
}

/****************** icon2 *****************************/

.icon2:before{
    @extend .style; background: rgba(14, 131, 205, 0.91); content: ''; width: 60px;
    height: 60px; left: 0%;
    opacity: 0; top: 50%; transform: translateY(-50%) rotate(12deg);
}
.icon2:after{
    @extend .style; background: rgba(14, 131, 205, 0.91); content: '';...

JavaScript

var test = document.getElementById("icon");

test.addEventListener("click",function(){
	var txt = document.getElementById("text");
	loadClass(text);
})

function loadClass(txt){
	if(txt.classList.contains("newClass")) txt.classList.remove("newClass");
	else txt.classList.add("newClass");
}