今天我们要来讨论一下如何实现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 >按钮文字</button>

通过以上代码，我们就可以轻松地实现CSS按钮文字竖向排列的效果了。