Its_ToXiiC Its_ToXiiC - 2 months ago 6
CSS Question

Button not animating from center

So when I used jquery to animate some padding instead of animation as if the anchor point is from the center it animates from the top left. All the code and a JSFiddle link are down below.

JSFiddle

HTML:

<div id="gaming-news-info">
<a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>


CSS:

#gaming-news-info {
position: absolute;
z-index: 999;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin-top: -100px;
}

#news-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
margin-top: 130px;
font-family: "Prompt-SemiBold";
margin-left: 90px;
}

Answer

You do not need jquery/javascript for a simple hover effect. CSS3 transitions and transformations are perfectly capable of doing the same thing without the overhead of a script library....

#gaming-news-info {
    position: absolute;
    z-index: 999;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
	transform: translateX(-50%) translateY(-50%);
	margin-top: -100px;
}

#news-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    margin-top: 130px;
    font-family: "Prompt-SemiBold";
	  margin-left: 90px;
	transform: scale(1);
	transition: all .2s;
}

#news-button:hover {
	transform: scale(1.05);
	transition: all .2s;
}
<div id="gaming-news-info">
  <a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>

Comments