custom hover effect position issue - html

Question

I am trying to position a button 10px off the horizontal center of the screen. This is the button code. The button uses some fancy hovering effect, which doesn't move with the button. How can I put the button 10px off the horizontal center of the screen?
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>

Answer 1

I have made some changes in the css to class button-2.
.button-2 {
float: none;
margin: 0 auto;
top: 10px;
}
body {
background-color: green;
}
.button-2 {
border: 2px solid white;
box-sizing: border-box;
cursor: pointer;
float: none;
height: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
top: 10px;
width: 140px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>

Answer 2

You need to use this:
.top {
position: relative;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
Make sure you add the unique class top to the first <div> and use that to position. You can also use margin and padding on the .top.
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>

Answer 3

try centering its parent and shifting it within its parent:
body {
background-color: green;
text-align: center;
}
.outer {
width: 200px;
margin: auto;
background-color: blue;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position outer">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>

Answer 4

try width 90% of div.button-2 and set border and padding to anchor.
body {
background-color: green;
}
.button-2 {
width: 90%;
height: 50px;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
border: 2px solid white;
padding:15px;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>