.ws-button {
margin:30px 0;
clear: both;
display: table;
}
.ws-button.fancy {
width:220px;
height:234px;
max-width: 100%;
background: url(//www.maennersacheshop.de/wp-content/themes/maennersacheshop/lib/views/ws_button/images/button-mask.png) no-repeat center;
background-size: contain;
padding: 50px 30px;
font-size: 41px;
font-size: 2.325rem;
font-weight:400;
text-align: center;
color: #52227A;
display: flex;
justify-content: center;
align-items: center;
line-height: 0.9;
transition: all .5s
}
.ws-button.fancy:hover {
transform: skewY(2deg) skewX(2deg);
color: #E71E6C
}
.button.left-button, .ws-button.left-button {
float:left;
}
.button.right-button, .ws-button.right-button {
float:right;
}
.button.center-button {
display: table;
}
.button.center-button, .ws-button.center-button {
margin:30px auto
}
.button.center-button > * {
display:table-cell;
vertical-align: middle;
}
@media screen and (max-width:767px) {
.ws-button.fancy {
font-size: 32px
}
.button.left-button, .ws-button.left-button,
.button.right-button, .ws-button.right-button {
float:none;
}
}
@media screen and (min-width:768px) and (max-width:1199px) {
.ws-button.fancy {
font-size: 38px
}
}