Button with Arrow.css

矢印付きのボタンを生成するcssジェネレーター

{{stateObject.text}}

背景色:

カラー

ボタンの背景色
テキストと矢印の色

テキスト

テキスト
テキストサイズ
rem

矢印

矢印の位置
矢印の太さ
px
矢印の大きさ(辺の長さ)

スタイル

ボタンの幅
px
角丸
px
<a href="" class="bw-arrow"><span>{{stateObject.text}}</span></a>
<button class="bw-arrow"><span>{{stateObject.text}}</span></button>
.bw-arrow {
	{{ displayFlex }}
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background-color: {{styleObject.trueElement.backgroundColor}};
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: {{styleObject.trueElement.borderRadius}}px;
	color: {{styleObject.trueElement.color}};
	font-size: {{ styleObject.trueElement.fontSize }}rem;
	padding: 15px;
	text-align: center;
	max-width: {{ changeWidth }};
	-webkit-transition: 0.3s linear 0s;
	-o-transition: 0.3s linear 0s;
	transition: 0.3s linear 0s;
}

.bw-arrow > *:first-child {
	width: calc(100% - 10px * 3);
}

.bw-arrow::after {
	content: '';
	display: inline-block;
	padding: 0;
	width: {{styleObject.pseudoElement.widthHeight}}px;
	height: {{styleObject.pseudoElement.widthHeight}}px;
	border-top: solid {{styleObject.pseudoElement.border}}px #FFFFFF;
	border-right: solid {{styleObject.pseudoElement.border}}px #FFFFFF;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
	-webkit-transform: rotate(45deg) translateX(-5px) translateY(5px);
	-ms-transform: rotate(45deg) translateX(-5px) translateY(5px);
	transform: rotate(45deg) translateX(-5px) translateY(5px);
	margin-left: 15px;
}

.bw-arrow:hover {
	opacity: 0.5;
}

a.bw-arrow:link, a.bw-arrow:active, a.bw-arrow:hover, a.bw-arrow:visited {
	color: #FFFFFF;
	text-decoration: none;
}

button.bw-arrow {
	width: 100%;
	border: none;
	cursor: pointer;
}