CSS左右空心按鈕箭頭是現代網頁設計中經常使用的一種樣式，可以使得按鈕在視覺上更具有吸引力和美觀性。下面介紹一下如何使用CSS實現左右空心按鈕箭頭。

/* 定義按鈕樣式 */
.button{
display: inline-block; /* 設置為行內塊元素 */
padding: 8px 15px; /* 按鈕內邊距 */
border: 2px solid #f00; /* 紅色實線邊框 */
border-radius: 25px; /* 圓角邊框 */
text-align: center; /* 文字居中 */
font-size: 20px; /* 字體大小 */
font-weight: bold; /* 字體加粗 */
color: #f00; /* 字體顏色 */
transition: all .5s ease; /* 設置過渡 */
}
/* 左空心箭頭樣式 */
.button-left{
position: relative; /* 相對定位 */
}
.button-left:before{
content: ''; /* 偽元素 */
position: absolute; /* 絕對定位 */
top: 10px; /* 距離父元素頂部距離 */
left: -20px; /* 距離父元素左側距離 */
width: 0; /* 寬度為0 */
height: 0; /* 高度為0 */
border-top: 10px solid transparent; /* 上邊框為透明色 */
border-left: 20px solid #f00; /* 左邊框為紅色實線 */
border-bottom: 10px solid transparent; /* 下邊框為透明色 */
}
/* 右空心箭頭樣式 */
.button-right{
position: relative; /* 相對定位 */
}
.button-right:after{
content: ''; /* 偽元素 */
position: absolute; /* 絕對定位 */
top: 10px; /* 距離父元素頂部距離 */
right: -20px; /* 距離父元素右側距離 */
width: 0; /* 寬度為0 */
height: 0; /* 高度為0 */
border-top: 10px solid transparent; /* 上邊框為透明色 */
border-right: 20px solid #f00; /* 右邊框為紅色實線 */
border-bottom: 10px solid transparent; /* 下邊框為透明色 */
}

上述代碼中，我們首先定義了一個名為.button的樣式，用來設置按鈕的基本樣式。接下來定義了.button-left和.button-right兩個樣式，分別用來實現左空心箭頭和右空心箭頭。通過設置偽元素的邊框顏色和寬度、位置等屬性，使得箭頭的形狀和位置符合預期效果。最后，通過設置按鈕的相對定位和使用:before和:after偽元素來實現左右兩側的箭頭效果。在HTML中使用該樣式時，只需要給按鈕添加按鈕基礎樣式和左右按鈕箭頭樣式即可。