今天我們來探討一下HTML炫酷特效按鈕的原代碼。

在HTML語言中，按鈕是非常重要的元素之一，不僅能夠實現頁面跳轉等功能，還能為我們的網站增加一些亮點。下面是一個炫酷的特效按鈕示例：

<button class="button">
<span>Hover Me!</span>
<div class="button__mask"></div>
<svg class="button__svg" viewBox="0 0 180 60" xmlns="http://www.w3.org/2000/svg">
<path d="M 20,20 L 20,10 L 140,10 C 155,10, 165,20, 165,35 L 165,35 C 165,50, 155,60, 140,60 L 20,60 C 5,60, -5,50, -5,35 L -5,35 C -5,20, 5,10, 20,10 L 20,10"></path>
</svg>
</button>

通過上述代碼，我們可以完成一個背景顏色為黑色，圓角為10px的、帶有SVG圖案的按鈕。其中，“button”類是我們定義的按鈕樣式，而“button__mask”類是我們添加的背景遮罩層，可以實現鼠標懸停時按鈕顏色漸變的效果。

最后，我們給出完整的CSS樣式代碼：

.button {
background-color: #000;
border-radius: 10px;
position: relative;
border: none;
overflow: hidden;
color: #fff;
padding: 0;
cursor: pointer;
}
.button__mask {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
opacity: 0;
transition: opacity 0.5s ease-out;
}
.button:hover .button__mask {
opacity: 1;
left: 0;
}
.button__svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
fill: none;
stroke: #fff;
stroke-width: 4;
stroke-dasharray: 0 761;
stroke-dashoffset: 0;
transition: stroke-dasharray 0.8s ease-out, stroke-dashoffset 0.5s ease-out;
}
.button:hover .button__svg {
stroke-dasharray: 761 761;
stroke-dashoffset: -722;
}

通過上述樣式代碼，我們實現了按鈕背景漸變、SVG圖案路徑動畫等多種效果，使得按鈕更加美觀、生動。相信大家可以通過上述示例，快速搭建自己的炫酷按鈕。