CSS:垂直侧边栏按钮

Question

有人有侧边栏按钮的代码(固定 + 90 度(吗？似乎找不到任何坚实的东西。

查看演示/想法

https://codepen.io/clientagency/pen/MWgmKMx

see the pen

Answer 1

使用我创建的这个例子：

.sticky-container {
background-color: #06c;
box-shadow: gray -1px 1px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 3px;
	position: fixed;
	top: 50%;
	right: 0px;
	width: 60px;
	height: auto;
	z-index: 9999;
transform: rotate(-90deg);
	margin-top: -24px;
	text-align: center;
color: white;
}
	a {
		padding:0 !important;
		display: block;
		text-align: left;
		height: 24px;
		width: 24px;
		padding: 8px 16px;
		color: #ffff;
		font-family: Arial, sans-serif;
		font-size: 17px;
		font-weight: bold;
		text-decoration: none;
	}

<button class="sticky-container">
<div class="button-container">
<a href="#">Test</a>
</div>
</button>
<!-- Test Date -->
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

Answer 2

对于专业的固定侧边栏和带有可读垂直文本的时尚按钮，请查看我为您制作的这个 JSFiddle：https://jsfiddle.net/4y5Lhp3c/1/。页面加载完成后，该按钮仅从水平变为垂直，因此请耐心等待:)

标记：

<input type="button" value="Contact Us" id="vert" />

j查询：

$(document).ready(function() {
$('#vert').val('cnonnntnancntnnuns');   
});