CSS hover transition, width from the center

Question

I was wondering how I would make an object wider from the center, instead of from the left. Here is my HTML:

<html>
  <body>
    <a href='#'>Hover</a>
  </body>
</html>

and here is my CSS:

body{
  margin:0;
  padding:0;
  background-color:#262626;
}
a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:10px 25px;
  border:2px solid white;
  text-decoration:none;
  color:white;
  font-family:verdana;
  font-size:27px;
  text-transform:uppercase;
  letter-spacing:4px;
  transform:1s;
}
a::before{
  content:'';
  position:absolute;
  height:100%;
  width:0%;
  top:0;
  left:50%;
  z-index:-1;
  background-image:linear-gradient(45deg, #eea949,#ff3984);
  transition:.5s;
}
a:hover::before{
  width:100%;
}

instead of widening from the center on hover, it widens from the left. I have tried adding transform: translate(-50%, 0); to the a:hover::before in the css, it kind of worked, but it made it a little wobbly (I don't know how to explain it). Can someone help with this?

Are you looking for the before element to grow and span the whole link, or what do you mean widen from the left? Otherwise, you can change it's left property from 50% to 0 — Eric, Jun 09 '20 at 14:53

score 2 · Accepted Answer · answered Jun 09 '20 at 15:04

2

You can do it with only background:

body {
  margin: 0;
  padding: 0;
  background-color: #262626;
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 25px;
  border: 2px solid white;
  text-decoration: none;
  color: white;
  font-family: verdana;
  font-size: 27px;
  text-transform: uppercase;
  letter-spacing: 4px;
  transition: 0.5s;
  background: linear-gradient(45deg, #eea949, #ff3984) center/0% 100% no-repeat;
}

a:hover {
  background-size: 100% 100%;
}

<a href='#'>Hover</a>

answered Jun 09 '20 at 15:04

Temani Afif

245,468
26
309
415

Thank you, this works! What exactly does center/0% 100% do? is there somewhere that explains it more in detail? – HoneyPoop Jun 09 '20 at 15:22
@HoneyPoop it's a shorthand to mean `position/size` so I place the gradient in the center with a size width=0% and height=100% then on hover I update only the size – Temani Afif Jun 09 '20 at 15:29
@HoneyPoop check this for more details: https://stackoverflow.com/a/54055521/8620333 – Temani Afif Jun 09 '20 at 15:30

score 0 · Answer 2 · answered Jun 09 '20 at 15:01

I think I solved it. I added a ::after to the element, rotated the gradient, and made the ::after go left 50%, while the ::before went right 50%. Like this:

body {
  margin: 0;
  padding: 0;
  background-color: #262626;
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 25px;
  border: 2px solid white;
  text-decoration: none;
  color: white;
  font-family: verdana;
  font-size: 27px;
  text-transform: uppercase;
  letter-spacing: 4px;
  transform: 1s;
}

a::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: 50%;
  z-index: -1;
  border: none;
  outline: none;
  background-image: linear-gradient(45deg, #eea949, #ff3984);
  transition: .5s;
}

a::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  right: 50%;
  z-index: -1;
  background-image: linear-gradient(135deg, #ff3984, #eea949);
  border: none;
  outline: none;
  transition: .5s;
}

a:hover::before {
  width: 50%;
}

a:hover::after {
  width: 50%;
}

<html>

<body>
  <a href='#'>Hover</a>
</body>

</html>

I hope this helps. If you want to see a JSFiddle, click here.

score 0 · Answer 3 · answered Jun 09 '20 at 15:16

Add these styles to the body element to center the link. Then remove the position: absolute; top: 0 and left:0; from the link (they would be redundant with flex) and add this style to make it parent.

body{
    display: flex;
    justify-content: center;
    align-items: center;
} 
a{ 
    position: relative
    transition: all .1s;
}

and then add transform: translateX(-50%); on the a:hover::before{} as you wanted. This format I found to not have a wobble.

CSS hover transition, width from the center

3 Answers3