修復引導按鈕CSS樣式

-2

我有兩個社交媒體按鈕（一個錨標籤，一個按鈕標籤，僅用於實驗目的使用不同的標籤）。修復引導按鈕CSS樣式

問題是，當我點擊按鈕時，它的顏色和邊框會改變爲默認引導.btn樣式（黑色，藍色邊框，而我想＃33CAFF顏色和＃33CAFF邊框）。

請注意，一旦我點擊屏幕上的其他位置，顏色就會變回＃33CAFF。

但我希望單擊按鈕後，樣式應設置爲其預先點擊狀態。

圖像的清晰度：

發生了什麼事，現在

我想要什麼

來源

2016-09-16 mritzi

忘了代碼：https：//jsfiddle.net/bhm1a1dh/29/ – mritzi

爲什麼你使用鏈接FB和按鈕的Twitter？ – JeetDaloneboy

@JeetDaloneboy只是玩弄不同的標籤。 – mritzi

只需添加下面的代碼。

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

這裏是jfiddle。

來源

2016-09-16 11:51:49 JeetDaloneboy

謝謝@jeetDaloneboy – mritzi

我早些時候嘗試過，唯一區別是我注意到您已經在.myBtn：hover之前定義了.myBtn：focus。必須是僞選擇器優先級的問題。 – mritzi

請把您想要的顏色代碼的CSS這樣

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

來源

2016-09-16 11:40:29

您已經使用<a>對於Facebook和<button> Twitter並

@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{ 
 
}

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

這裏是JSFiddle鏈接

來源

2016-09-16 11:47:38 Gowtham

我正在試驗標籤。如果你能幫我修理按鈕造型，那將是非常棒的。 – mritzi

以下CSS變化會做：

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

但我仍然不認爲需要有一個作爲一個按鈕，另一個爲紐帶。

來源

2016-09-16 11:57:08

試驗不同的標籤，將在實際項目中使用最合適的標籤。 – mritzi

修復引導按鈕CSS樣式

回答

相關問題