sanjihan sanjihan - 1 month ago 6
CSS Question

custom hover effect position issue

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>
<a href="#"> CLICK ME </a>
</div>
</div>




Answer

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>
    <a href="#"> CLICK ME </a>
  </div>
</div>

Comments