Css animation and dropdown navigation with Bootstrap 4

Question

html code

<section class="container-fluid">
  <div class="col">
    <div class="row justify-content-md-center">
      <div class="col nav-color card-border">
        <ul class="nav nav-pills">
          <li class="container-custom topBotomBordersIn dropdown">
            <button class="btn-custom-animated dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">nav1dropdown</button>
            <div class="dropdown-menu">
              <button class="btn-custom-animated">dropdown1</button> 
              <button class="btn-custom-animated">dropdown2</button> 
              <button class="btn-custom-animated">dropdown3</button> 
            </div>                
          </li>
          <li class="container-custom topBotomBordersIn">
            <button class="btn-custom-animated">nav2</button> 
            <button class="btn-custom-animated">nav3</button> 
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

css code

.center-pills {
  display: flex;
  justify-content: center;
}
.nav-color {
  background-color:deepskyblue;
}
.dropdown-menu {
  background-color: deepskyblue !important;
}
.btn-custom-animated {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
.btn-custom-animated.active.focus,
.btn-custom-animated.active:focus,
.btn-custom-animated.focus,
.btn-custom-animated.focus:active,
.btn-custom-animated:active:focus,
.btn-custom-animated:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
li.container-custom {
  font-family: Raleway;
  margin: 0 auto;
  /*padding: 10em 3em;*/
  text-align: center;
}
li.container-custom button {
  color: #FFF;
  text-decoration: none;
  font: 20px Raleway;
  margin: 0px 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
/* Top and Bottom borders come in */
li.topBotomBordersIn button:before, li.topBotomBordersIn button:after {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #FFF;
  content: "";
  opacity: 0;
  transition: all 0.3s;
}
li.topBotomBordersIn button:before {
  top: 0px;
  transform: translateY(-10px);
}
li.topBotomBordersIn button:after {
  bottom: 0px;
  transform: translateY(10px);
}
li.topBotomBordersIn button:hover:before, li.topBotomBordersIn button:hover:after {
  opacity: 1;
  transform: translateY(0px);
}

jsfiddle.net

In this project I'm using Bootstrap 4 with all js plugins.

I can't figure out the reason why the first button (dropdown) has different bottom line during animation. At jsfiddle navigation buttons in dropdown don't work either, but in project they animate correctly.

Answer 1

The issue is the button has a class .dropdown-toggle, which has it own css aded to it's psuedo element .dropdown-toggle:after, just override it and it will work fine.

.center-pills {
  display: flex;
  justify-content: center;
}
.nav-color {
  background-color:deepskyblue;
}
.dropdown-menu {
  background-color: deepskyblue;
}
.btn-custom-animated {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
.btn-custom-animated.active.focus,
.btn-custom-animated.active:focus,
.btn-custom-animated.focus,
.btn-custom-animated.focus:active,
.btn-custom-animated:active:focus,
.btn-custom-animated:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
li.container-custom {
  font-family: Raleway;
  margin: 0 auto;
  /*padding: 10em 3em;*/
  text-align: center;
}
li.container-custom button {
  color: #FFF;
  text-decoration: none;
  font: 20px Raleway;
  margin: 0px 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
/* Top and Bottom borders come in */
li.topBotomBordersIn button:before, li.topBotomBordersIn button:after {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #FFF;
  content: "";
  opacity: 0;
  transition: all 0.3s;
  border: none; /* Added to override css added by class `.dropdown-toggle` */
  margin: 0; /* Added to override css added by class `.dropdown-toggle` */
}
li.topBotomBordersIn button:before {
  top: 0px;
  transform: translateY(-10px);
}
li.topBotomBordersIn button:after {
  bottom: 0px;
  transform: translateY(10px);
}
li.topBotomBordersIn button:hover:before, li.topBotomBordersIn button:hover:after {
  opacity: 1;
  transform: translateY(0px);
}
li.container-custom .dropdown-menu button.btn-custom-animated {
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<section class="container-fluid">
  <div class="col">
    <div class="row justify-content-md-center">
      <div class="col nav-color card-border">
        <ul class="nav nav-pills">
          <li class="container-custom topBotomBordersIn dropdown">
            <button class="btn-custom-animated dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">nav1dropdown</button>
            <div class="dropdown-menu">
              <button class="btn-custom-animated">dropdown1</button> 
              <button class="btn-custom-animated">dropdown2</button> 
              <button class="btn-custom-animated">dropdown3</button> 
            </div>                
          </li>
          <li class="container-custom topBotomBordersIn">
            <button class="btn-custom-animated">nav2</button> 
            <button class="btn-custom-animated">nav3</button> 
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  $('.dropdown-toggle').dropdown();
</script>