Transform and position relative - No 2!

Question

Transform and position relative - No 2!

Navigation

#1 by (0 votes)

0

I need some help with transform, and position relative! link Here the button works perfect, when you pass the mouse it increases, using the transform, but it is not centralized and responsive the way I need it.

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

link Here's with relative positioning, centralized and responsive, the way I need it, but the transform simply does not work, it's ignored.

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

Can you give me a hand? I need exactly the 2 ...

css

asked by anonymous 09.04.2017 / 16:15

1 answer

Redirect user to a certain time Nested Wrong Translation Inflection

score 0 · Answer 1

Use calc to remove half the size of the button to center: 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>