CSS按鈕與「信標」響應爲單擊事件

我想創建一個事件，它類似於什麼的按鈕做此頁面上：CSS按鈕與「信標」響應爲單擊事件

正如你所看到的，點擊按鈕內部的顏色會變暗。

這些叫做「事件」是什麼？是否需要用jQuery來完成，還是隻用CSS就可以實現？我只能想出一個名稱，這只是一個點擊事件信標按鈕，但在Google搜索後，我似乎沒有找到任何結果。

2016-11-18 Pinch

這是所有CSS。他們使用由元素的'：active'狀態觸發的轉換。使用開發工具並檢查有問題的元素。對於Chrome，在「樣式」選項卡下有一個「：hov」選項卡，可讓您將各種狀態應用於按鈕。將'：active'應用於按鈕。檢查按鈕的樣式和僞元素之後的樣式。 – hungerstar

只有使用css才能實現此目的。不需要使用jquery。你必須爲.button，.button編寫一個css：after和.button：active：事件之後（假設該按鈕是你的類名或按鈕）。

這裏是CSS我試圖與

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.button { 
 
text-transform: uppercase; 
 
    border: none; 
 
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); 
 
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); 
 
    -webkit-transition: all 0.4s; 
 
    -o-transition: all 0.4s; 
 
    transition: all 0.4s; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    /*-ms-touch-action: manipulation;*/ 
 
    /*touch-action: manipulation;*/ 
 
    cursor: pointer; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    white-space: nowrap; 
 
    padding: 6px 16px; 
 
    font-size: 13px; 
 
    line-height: 1.846; 
 
    border-radius: 3px; 
 
    
 
} 
 

 
.button:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: -webkit-radial-gradient(circle, #000000 10%, transparent 10.01%); 
 
    background-image: -o-radial-gradient(circle, #000000 10%, transparent 10.01%); 
 
    background-image: radial-gradient(circle, #000000 10%, transparent 10.01%); 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: 1000% 1000%; 
 
    background-size: 1000% 1000%; 
 
    background-position: 50%; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    -webkit-transition: background .5s, opacity 1s; 
 
    -o-transition: background .5s, opacity 1s; 
 
    transition: background .5s, opacity 1s; 
 
} 
 

 

 
.button:active:after { 
 
    -webkit-background-size: 0% 0%; 
 
    background-size: 0% 0%; 
 
    opacity: .2; 
 
    -webkit-transition: 0s; 
 
    -o-transition: 0s; 
 
    transition: 0s; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Animated Button - Ripple Effect</h2> 
 

 
<button class="button">Click Me</button> 
 

 
</body> 
 
</html>

來源

2016-11-18 16:27:38 Disura

CSS按鈕與「信標」響應爲單擊事件

回答

相關問題