CSS水滴按鈕

CSS水滴按鈕是一個非常炫酷的按鈕，它呈現出水滴的形狀，給人以視覺上的沖擊力。本文將向大家介紹如何使用CSS來創建一個水滴按鈕。

.btn-waterdrop {
width: 100px;
height: 80px;
position: relative;
border-radius: 50% 50% 0 0;
background-color: #3a3a3a;
box-shadow: 0 5px 0 #2b2b2b;
cursor: pointer;
transition: all .2s ease-in-out;
}
.btn-waterdrop:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 90px;
height: 70px;
border-radius: 70px 70px 0 0;
background-color: #f60;
transition: all .2s ease-in-out;
}
.btn-waterdrop:hover {
box-shadow: 0 3px 0 #2b2b2b;
top: 2px;
}
.btn-waterdrop:hover:before {
top: -3px;
}

首先，我們需要定義一個CSS類名為.btn-waterdrop的樣式，它設置了一些按鈕的基本樣式，包括大小、形狀、背景色、陰影和光標樣式。隨后，我們使用偽元素:before來實現水滴的效果。我們將它放在按鈕的頂部，并使用絕對定位來讓它居中。我們還設置了它的背景色和邊框半徑，使它呈現出水滴的形狀。

接著，我們使用:hover偽類來定義按鈕的鼠標懸停狀態下的樣式。我們將按鈕向上移動一點，并將陰影顏色變淺，同時將水滴向上移動一點，使它看起來更加立體。

最后，我們只需要將這個樣式應用于一個HTML元素上即可創建一個CSS水滴按鈕。