2017-08-26 209 views
3

我使用的是類.btn設置一些按鈕:改變按鈕的顏色兌現CSS

<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a> 

我重寫這樣的默認顏色butto:

.btn{ 
    background-color: #4dd0e1 
} 
.btn:hover { 
    background-color: #01579b 
} 

它的工作原理,但是當我點擊按鈕的顏色改變爲默認的綠色,我嘗試:

.btn:active{ 
    background-color: #4dd0e1 
} 

.btn:visited{ 
    background-color: #4dd0e1 
} 

,但它沒有工作

回答

4

使用以下命令:

.btn:focus{ 
    background-color: #4dd0e1 
} 
2

.btn{ 
 
    background-color: aqua 
 
} 
 
.btn:visited{ 
 
    background-color: yellow 
 
} 
 
.btn:hover { 
 
    background-color: skyblue 
 
} 
 
.btn:active{ 
 
    background-color: pink; 
 
}
<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a

您應該按照這個順序當你寫CSS代碼

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

我不知道爲什麼,但它使你的工作代碼。

你只需要改變CSS選擇(:visited:hover:active

1

使用MaterializeCss顏色幫手clases Materialize Colors

<a class="waves-effect waves-light btn amber darken-4">button</a>

的順序