今天我們要來討論一下如何實現CSS按鈕文字豎向排列的效果。

在實現CSS按鈕文字豎向排列的效果之前，先來看一下基本的CSS按鈕樣式如何設置：

/* CSS按鈕基本樣式 */
.btn {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 鼠標懸停狀態 */
.btn:hover {
background-color: #2E8B57;
}

以上代碼設置了一個基本的CSS按鈕樣式，包括按鈕的背景色、字體顏色、邊框、圓角等樣式，并且設置了鼠標懸停狀態下按鈕的背景色。

下面我們來看一下如何實現CSS按鈕文字豎向排列的效果：

/* CSS按鈕豎向排列文字樣式 */
.btn.vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
}

以上代碼中，我們使用了CSS 3中的writing-mode屬性來實現豎向排列文字的效果。同時，還設置了text-orientation屬性來保證文字豎向排列的正確性，并計算了文字占用的尺寸，避免文字溢出的問題。

接下來，我們只需要在HTML中添加一個.vertical類，即可實現CSS按鈕文字豎向排列的效果了：

<button class="btn vertical">按鈕文字</button>

通過以上代碼，我們就可以輕松地實現CSS按鈕文字豎向排列的效果了。