0

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...

1 Resposta 1

0

Usa o calc para retirar metade do tamanho do button para centralizar: top: calc(50% - 92px/2); left: calc(50% - 156px/2); .

.playbuttondiv {
    position: absolute;
    top: calc(50% - 92px/2);
    left: calc(50% - 156px/2);
    -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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .