Button not scaling using ::after

Hilary 0
Viewed 33

I want to create another button underneath .btn so that my button scales and I can apply more properties to it. The issue I am having is that the button I create is not underneath. Instead it is next to it.

.btn:link,
btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 30px #00000020;
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0px 5px 10px #00000020;
}

.btn-white {
  background-color: #fff;
  color: #777;
  padding: 15px 40px;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.btn-white::after {
  background-color: red;
}

.btn:hover::after {
  transform: scale(2);
}
<header class="header">
  <div class="logo-box">
    <img src="img/logo-white.png" alt="Logo" class="logo" />
  </div>
  <div class="text-box">
    <h1 class="heading-primary">
      <span class="heading-primary-main">Outdoors</span>
      <span class="heading-primary-sub">is where life happens</span>
    </h1>
    <a href="#" class="btn btn-white">Discover our tours</a>
  </div>
</header>

css html
1 Answers

it's is under it actually. you just need to add left: 0;

.btn:link,
btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 30px #00000020;
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0px 5px 10px #00000020;
}

.btn-white {
  background-color: #fff;
  color: #777;
  padding: 15px 40px;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.btn-white::after {
  background-color: red;
}

.btn:hover::after {
  transform: scale(2);
  transition: 0.5s;
}
<header class="header">
  <div class="logo-box"> <img src="img/logo-white.png" alt="Logo" class="logo" /> </div>
  <div class="text-box">
    <h1 class="heading-primary"> <span class="heading-primary-main">Outdoors</span> <span class="heading-primary-sub">is where life happens</span> </h1> <a href="#" class="btn btn-white">Discover our tours</a> </div>
</header>

Willpower-70
Related