分享几个水滴效果的按钮

**水滴效果的按钮**

在设计界面时，水滴效果的按钮是非常流行的一种视觉元素。它可以让用户感受到一种轻松、自然的感觉，并且能够很好地与其他元素融合在一起。下面我们将分享几个水滴效果的按钮示例，以及它们的代码实现。

### 示例1：简单的水滴效果首先，我们来看一个简单的水滴效果的按钮示例：

![simple_water_drop_button]( />
这个按钮使用了一个圆形的背景，并且有一个水滴效果的图标。我们可以通过以下代码实现这种效果：

css.water-drop-button {
 background-color: #fff;
 border-radius:50%;
 width:100px;
 height:100px;
}

.water-drop-button .water-drop-icon {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 font-size:24px;
}

html<button class="water-drop-button">
 <i class="fas fa-water" aria-hidden="true"></i>
</button>

css.gradient-water-drop-button {
 background: linear-gradient(90deg, #fff, #ccc);
 border-radius:50%;
 width:100px;
 height:100px;
}

.gradient-water-drop-button .water-drop-icon {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 font-size:24px;
}

html<button class="gradient-water-drop-button">
 <i class="fas fa-water" aria-hidden="true"></i>
</button>

css.animated-water-drop-button {
 background-color: #fff;
 border-radius:50%;
 width:100px;
 height:100px;
}

.animated-water-drop-button .water-drop-icon {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 font-size:24px;
}

@keyframes animate {
0% {
 transform: scale(1);
 }
100% {
 transform: scale(2);
 }
}

html<button class="animated-water-drop-button">
 <i class="fas fa-water" aria-hidden="true"></i>
</button>