Question

我有两个社交媒体按钮（一个锚标记，一个按钮标记，使用不同的标记仅用于实验目的）。

问题在于，当我点击按钮时，它的颜色和边框变为默认的bootstrap .btn样式（黑色，蓝色边框。虽然我想要＃33CAFF颜色和＃33CAFF边框）。

请注意，一旦我点击屏幕上的其他位置，颜色会变回＃33CAFF。

但我希望在点击按钮后，样式应设置为其预点击状态。

图片清晰：

现在正在发生什么

我想要什么

Answer 1

请将您想要的颜色代码放在这样的CSS中

.btn or button class / Id name: focus{
color:#33CAFF; (your color code)
}

Answer 2

您已将<a>用于facebook，<button>用于Twitter

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Nunito);
body{
  background-color:#33CAFF;
  font-family:'Nunito',sans-serif;
}
#myDiv{
  background-color:#fff;
  color:#33CAFF;
  margin-top:20px;
  padding:20px;
  line-spacing:1.5px;
}
.myBtn{
  background-color:#fff;
  color:#33CAFF;
  border:1px solid #33CAFF;
  border-radius:0;
  padding:10px;
  margin:5px;
}
a:visited{
  background-color:#fff;
  color:#33CAFF;
}
.myBtn:hover{
  background-color:#33CAFF;
  color:#fff;
  text-decoration:none;
}
a:active{
  background-color:#fff;
  color:#33CAFF;
}
button:focus{
}

＆＃13;

<div class="container">
  <div class="row">
    <div id="myDiv" class="col-sm-6 col-sm-offset-3 text-center">
      <h2>Some Text to go here</h2>
      <p>Lorem ipsum dolor sit amet, te eam option discere saperet, quo porro libris te, quo ea eirmod gloriatur. Qui et mutat numquam consetetur, mei blandit delectus no, eam at adipisci senserit. Cibo error at mei. At pri nullam altera, pri diam noster scripta eu. Eu quot iudicabit sadipscing vix.       </p>
      <a type="button" class="btn myBtn">
        <i class="fa fa-facebook"></i> Facebook
      </a>
      <a type="button" class="btn myBtn">
        <i class="fa fa-twitter"></i> Twitter
      </a>
    </div>
  </div>
</div>

＆＃13;

以下是JSFiddle链接

Answer 3

只需添加以下代码。

.myBtn:focus {
    background-color:#fff;
  color:#33CAFF;
  outline:none;
}

这是jfiddle。

Answer 4

以下css更改将执行：

.myBtn:focus
    {
    background-color:#fff;
    color:#33CAFF;
    border:1px solid #33CAFF;
    }

但我仍然认为不需要将一个作为按钮而另一个作为链接。

修复Bootstrap按钮CSS样式

4 个答案: