.uc_creative_buttons * { 
margin: 0; 
padding: 0; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.uc_creative_buttons{
font-family: inherit;
}
.uc_creative_buttons .uc_content{
display: flex;
flex-wrap: wrap;
} .uc_button,
.uc_button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.uc_button {
background: none;
display: block;
margin: 0 auto;
position: relative;
text-align: center;
}
.uc_button span{
z-index: 2;
position: relative;
display: block;
}
.uc_button::before,
.uc_button::after {
background: #fff;
content: '';
position: absolute;
z-index: 1;
}
.uc_button:hover {
color: #2ecc71;
} .uc_btn-1::after {
height: 0;
left: 0;
top: 0;
width: 100%;
}
.uc_btn-1:hover:after {
height: 100%;
} .uc_btn-7::after {
height: 0;
left: 0;
bottom: 0;
width: 100%;
}
.uc_btn-7:hover:after {
height: 100%;
} .uc_btn-2::after {
height: 100%;
left: 0;
top: 0;
width: 0;
}
.uc_btn-2:hover:after {
width: 100%;
} .uc_btn-6::after {
height: 100%;
right: 0;
top: 0;
width: 0;
}
.uc_btn-6:hover:after {
width: 100%;
} .uc_btn-3::after {
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.uc_btn-3:hover:after {
height: 100%;
left: 0;
top: 0;
width: 100%;
} .uc_btn-4::before {
}
.uc_btn-4::after {
background: #2ecc71;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.uc_btn-4:hover:after{
height: 0;
left: 50%;
top: 50%;
width: 0;
} .uc_btn-5 {
overflow: hidden;
}
.uc_btn-5::after { height: 100%;
left: -100%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.uc_btn-5:hover:after {
height: 100%;
width: 200%;
}