Difference between .bttn:before and .bttn:hover:before

Question

I used the following code snippet to get the effect on the Submit buttons in the form.

Codepen Link

HTML:

a.bttn-dark:hover {
  color: #FFF;
}

a.bttn-dark:focus {
  color: #FFF;
}

.bttn:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #FF0072;
  z-index: -2;
}

.bttn:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

<div class="flex">
  <a href="#0" class="bttn">Continue</a>
</div>
<div class="flex dark">
  <a href="#0" class="bttn-dark">Continue</a>
</div>

I am confused about the usage of following,

what would be different if a:hover is only used instead of a.bttm-dark:hover ?
bttn:before and bttn:hover:before
why is the pseudo element bttn:hover appearing in the HTML document after bttn element? Shouldn't it come before?

a lot of question for a one question ... and for each one there is a lot of duplicates ---> but you are simply asking about basic CSS, as the first one is about specificity and the other one about what ::before mean — Temani Afif, Apr 16 '18 at 09:51

score 0 · Answer 1 · answered Apr 16 '18 at 11:38

Follow below css code. CSS:

a.bttn {
    color: #FF0072;
    text-decoration: none;  
}
a.bttn-dark {
    color: #644cad;
    text-decoration: none;  
}
a.bttn:hover {
  color: #FFF;
}
a.bttn-dark:hover {
  color: #FFF;
}

a.bttn-dark:focus {
  color: #FFF;
}

.bttn {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid #FF0072;
  border-radius:2px;
  position:relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);   
  }
.bttn:before { 
   -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:#FF0072;
    z-index:-2;
  }
.bttn:hover { 
  -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
}
.bttn:focus { 
 transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
}
.bttn:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}
.bttn-dark {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid #644cad;
  border-radius:2px;
  position:relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);   
  }
.bttn-dark:before { 
   -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:#644cad;
    z-index:-2;
  }
.bttn-dark:hover { 
  -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
}
.bttn-dark:focus { 
 transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
}
.bttn-dark:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

Difference between .bttn:before and .bttn:hover:before

1 Answers1