激活时更改按钮边框答案

【问题标题】：Changing button border when active激活时更改按钮边框
【发布时间】：2018-07-21 01:10:25
【问题描述】：

我有几个具有悬停效果的操作按钮。但是，当单击并激活按钮时，我希望按钮边框显示并更改颜色。理想情况下，我想用纯 CSS 来实现这一点，但尝试过但没有成功。这可能吗？我试过使用 :focus 和 :active 伪类，但没有任何效果。这是我的按钮代码：

 .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>

这个我试过了，还是不行：

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

【问题讨论】：

:active 应该可以吗？你能显示你尝试过的代码吗？
您在 :active CSS 中的边框后缺少 :。如果您添加它，它就可以正常工作。
啊，不错，但它仍然不起作用。谢谢！
您确定您了解:active 是什么吗？它与您的应用程序的当前状态无关。它只是瞬时点击动作的指标。

标签： html css pseudo-class

【解决方案1】：

实际上有多种原因使其无法正常工作。首先你的css有错别字

border.5rem solid $color-lightest;

将无法工作，因为您在边框后缺少冒号和空格

border: .5rem solid $color-lightest;

然后你可能想看看这个：Is an anchor tag without the href attribute safe?

您的实际<a> 不是正确的链接，它是占位符超链接，因此浏览器的反应不同。

在 href 中添加一个 # 使其在点击时可以激活。

见 jsfiddle here

【讨论】：