Galerinha preciso de uma ajuda com o transform, e o position relative! http://codepen.io/anon/pen/mWNJjR Aqui o botão funciona perfeito, quando você passa o mouse ele aumenta, usando o transform, mas não está centralizado e responsivo da forma que eu preciso.
.playbuttondiv {
position: absolute;
top: 33%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
transform: translateX(-50%) translateY(-50%) scale(1, 1);
font-family: 'Noto Sans', sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #222;
}
.playbutton {
background-color: #31ae1f;
z-index: -1;
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
font-size: 36px;
line-height: 39px;
text-decoration: none;
padding: 23px 23px 21px 23px;
color: white;
letter-spacing: 1px;
font-family: 'Noto Sans', sans-serif;
border-top: 4px solid #64fd1f;
border-bottom: 4px solid #1e8c03;
border-left: 4px solid #156c00;
border-right: 4px solid #47d009;
font-weight: bold;
position: fixed;
}
.playbutton:hover {
background-color: #272727;
border-top-color: #3d3d3d;
border-bottom-color: #000;
border-right-color: #2f2f2f;
border-left-color: #171717;
outline-offset: -2px;
color: white;
webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="playbuttondiv">
<a class="playbutton">Jogar</a>
</div>
http://codepen.io/anon/pen/ryXVrR Aqui está com o position relative, centralizado e responsivo, da forma que eu preciso, mas o transform simplesmente não funciona, é ignorado.
.playbuttondiv {
position: absolute;
top: 33%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
transform: translateX(-50%) translateY(-50%) scale(1, 1);
font-family: 'Noto Sans', sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #222;
}
.playbutton {
background-color: #31ae1f;
z-index: -1;
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
font-size: 36px;
line-height: 39px;
text-decoration: none;
padding: 23px 23px 21px 23px;
color: white;
letter-spacing: 1px;
font-family: 'Noto Sans', sans-serif;
border-top: 4px solid #64fd1f;
border-bottom: 4px solid #1e8c03;
border-left: 4px solid #156c00;
border-right: 4px solid #47d009;
font-weight: bold;
position: relative;
}
.playbutton:hover {
background-color: #272727;
border-top-color: #3d3d3d;
border-bottom-color: #000;
border-right-color: #2f2f2f;
border-left-color: #171717;
outline-offset: -2px;
color: white;
webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="playbuttondiv">
<a class="playbutton">Jogar</a>
</div>
Podem me dar uma ajuda? Preciso exatamente dos 2...