How to fix link (a-tag) animation that goes out of the border?

Question

I tried to use a CSS animation for my navigation buttons on my site.

What it should do: Filling the buttons from the middle to the border. (-45 degrees turned)

What it does: The animation shows a square leaving the border of the button.

This is what the result of the animation looks like, as you can see... not within the borders of the button

.button-container {
  padding-top: 20px;
}

.btnNavigator1 {
  position: relative;
  color: black;
  font-size: 14px;
  font-family: "montserrat";
  text-decoration: none;
  margin: 30px 0;
  border: 2px solid #f24646;
  padding: 14px 60px;
  text-transform: uppercase;
  overflow: hidden;
  transition: 1s all ease;
}

.btnNavigator1::before {
  background: #f24646;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: all 0.6s ease;
  width: 100%;
  height: 0%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.btnNavigator1:hover::before {
  height: 380%;
}

<div class="button-container">
  <a href="#" class="btnNavigator1">Home</a>
  <a href="#" class="btnNavigator1">Shop</a>
  <a href="#" class="btnNavigator1">FAQ</a>
  <a href="#" class="btnNavigator1">Contact</a>
</div>

Please excuse me for any mistakes in my question, I am new to this community and I try my best to make my question clear as possible.

Temani Afif · Accepted Answer · 2019-07-21T10:35:23.333

oveflow apply to only block level elements, so you need to add display:inline-block; to your links:

.button-container {
  padding-top: 20px;
}

.btnNavigator1 {
  position: relative;
  display:inline-block;
  color: black;
  font-size: 14px;
  font-family: "montserrat";
  text-decoration: none;
  border: 2px solid #f24646;
  padding: 14px 40px;
  text-transform: uppercase;
  overflow: hidden;
  transition: 1s all ease;
  z-index:0;
}

.btnNavigator1::before {
  background: #f24646;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transition: all 0.6s ease;
  width: 100%;
  height: 0%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.btnNavigator1:hover::before {
  height: 380%;
}

<div class="button-container">
  <a href="#" class="btnNavigator1">Home</a>
  <a href="#" class="btnNavigator1">Shop</a>
  <a href="#" class="btnNavigator1">FAQ</a>
  <a href="#" class="btnNavigator1">Contact</a>
</div>

Here is another idea to have the same effect using only background:

.button-container {
  padding-top: 20px;
}

.btnNavigator1 {
  display:inline-block;
  color: black;
  font-size: 14px;
  font-family: "montserrat";
  text-decoration: none;
  border: 2px solid #f24646;
  padding: 14px 40px;
  text-transform: uppercase;
  transition: 0.5s all ease;
  background:
    linear-gradient(-45deg,transparent 50%,#fff 50%),
    linear-gradient(135deg,transparent 50%,#fff 50%),
    #f24646;
  background-size:200% 100%;
  background-position:center;
  background-repeat:no-repeat;
}


.btnNavigator1:hover {
  background-position:left 150% top 0,right 150% top 0;
}

<div class="button-container">
  <a href="#" class="btnNavigator1">Home</a>
  <a href="#" class="btnNavigator1">Shop</a>
  <a href="#" class="btnNavigator1">FAQ</a>
  <a href="#" class="btnNavigator1">Contact</a>
</div>

Related question to get more details about the value used inside background: Using percentage values with background-position on a linear gradient

How to fix link (a-tag) animation that goes out of the border?

1 Answers1