如何使html按鈕看起來在使用css？

Question

我正在使用HTML和CSS狀態的按鈕，我想按鈕留點擊，但似乎無法找到一種方法，把陰影按鈕本身給它的外觀，當它被擠壓「在按下」英寸任何幫助表示讚賞。我試過使用box-shadow，但似乎無法得到它在實際的按鈕本身。

Answer 1

您可以將button設置爲不同的狀態。通過造型的:active狀態，可以使button出現按下。

可用的狀態是

• :hover - 激活，當你將鼠標懸停在元素用鼠標
• :focus - 當你點擊它激活。它將保持集中直到你點擊按鈕
• :active外 - 當你點擊它也激活。但只要按下它，只會保持有效。

:active狀態用於使button看起來被按下。

button { 
 
    background: #ededed; 
 
    border: 1px solid #ccc; 
 
    padding: 10px 30px; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
} 
 

 
button:hover { 
 
    background: #e5e5e5; 
 
} 
 

 
button:focus { 
 
    outline: none; 
 
} 
 

 
button:active { 
 
    background: #e5e5e5; 
 
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1; 
 
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1; 
 
      box-shadow: inset 0px 0px 5px #c1c1c1; 
 
}

<button> 
 
    Click me 
 
</button>

有人用:focus狀態，使button出現壓，在我原來的awnser也看到了。但是，與此相關的問題是，button將保持在:focus狀態，直到用戶在button之外單擊。

Answer 2

我覺得做一個按鈕，最好的辦法看起來像是按下它，使它有點暗。

button{ 
 
    background-color: #03A9F4; 
 
    border: none; 
 
    padding: 15px 25px; 
 
    text-transform: uppercase; 
 
    color: white; 
 
    font-weight: 700; 
 
    border-radius: 3px; 
 
} 
 
button:hover, button:focus{ 
 
    background-color: #0074a9; 
 
    outline: none; 
 
}

<button>Button</button>