CODEWITHSUNDEEP
htmlcsspseudo-class
Dave
Dave

Reputation: 1277

Changing button border when active

I have a couple action buttons that have a hover over effect. When a button is clicked and active though, I want the button border to show and have the color change. Ideally I would like to achieve this with pure CSS, but have tried without success. Is this possible? I've tried using the :focus and :active pseudo classes and nothing has worked. Here is my code for my buttons:

 .action-buttons {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      margin-top:2.75em;
    }
    
    .button {
      position: relative;
      padding: 10px 16px;
      font-size: 18px;
      width: 20rem;
      background-color: transparent;
      color: $color-lightest;
      text-align: center;
      cursor: pointer;
    }
    
    .button:before, .button:after {
      display: block;
      content: " ";
      border-top: none;
      border-right: none;
      border-bottom: none;
      border-left: none;
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      transition: opacity 200ms ease-in-out;
    }
    
    .button:before {
      top: -0.15rem;
      left: 0;
    }
    
    .button:after {
      bottom: 0;
      right: 0;
    }
    
    .button.at_the_same_time:hover:before {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-top: .5rem solid $color-lightest;
      border-right: .5rem solid $color-lightest;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
    }
    
    .button.at_the_same_time:hover:after {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-bottom: .5rem solid $color-lightest;
      border-left: .5rem solid $color-lightest;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
    }
<div class="action-buttons">
        <a class="button at_the_same_time click">Generate Forms</a>
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="10" data-slide="slide10">Sign Forms</a>   
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="11" data-slide="slide11">Completed Forms</a>
      </div>

I've tried this, but it doesn't work:

.button.at_the_same_time:active, 
 .button.at_the_same_time:focus 
 {
     border.5rem solid $color-lightest;
  }

Upvotes: 0

Views: 1558

Answers (1)

TimDlp
TimDlp

Reputation: 11

Multiple reasons actually made it not working. First of all there's a typo in your css 

border.5rem solid $color-lightest;

will not work because you have a missing colon and space after border

border: .5rem solid $color-lightest;

And then you might wanna take a look at this : Is an anchor tag without the href attribute safe?

Your actual <a> isn't a proper link, it's a placeholder hyperlink, therefore the browser reacts differently.

Adding just a # in the href makes it activable on click.

See jsfiddle here

Upvotes: 1

Related Questions