<div class="btn">
<a href="#">ボタン</a>
</div>

.btn a:after {
	content: " ";
	width: 4px;
	height: 4px;
	position: absolute;
	right: 15px;
	top: 50%;
	border-top: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	transform: rotate(45deg) translateY(-50%);
	transition: 0.2s;
}

<div class="btn btn_arrow">
<a href="#">ボタン</a>
</div>

.btn_arrow a:before,
.btn_arrow a:after {
	content: "";
	display: block;
	height: 5px;
	border-top: none;
	border-left: none;
	transform: skewX(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: -15%;
}
.btn_arrow a:before {
	width: 30%;
	border-right: 2px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
.btn_arrow a:after {
	width: 14%;
	border-right: 2px solid #0085B2;
	border-bottom: 1px solid #0085B2;
}
.btn.btn_arrow:hover a:after {
	right: -15%;
}

<div class="btn btn_hover">
<a href="#">ボタン</a>
</div>

.btn.btn_hover a {
	z-index: 1;
	overflow: hidden;
}
.btn_hover a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background-color: rgba(255,241,0,0.5);
	position: absolute;
	transition: all .4s ease;
	z-index: -1;
}
.btn_hover:hover a:before {
	left: 0;
}

<div class="btn btn_radius">
<a href="#">ボタン</a>
</div>

.btn_radius a {
	border-radius: 50px;
	padding: 8px 4em 8px 4em;
	font-size: 14px;
	border: 2px solid #8BB220;
	color: #8BB220 !important;
	background-color: #FFFFFF;
}
.btn_radius a:hover {
	color: #FFFFFF !important;
	background-color: #8BB220;
}
.btn_radius a:after {
	border-top: 2px solid #8BB220;
	border-right: 2px solid #8BB220;
}
.btn_radius a:hover:after {
	border-top: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
}

<div class="btn btn_shadow">
<a href="#">ボタン</a>
</div>

.btn_shadow a {
	padding: 12px 4em 12px 4em;
	font-size: 14px;
	border: 1px solid #FB4840;
	color: #FB4840 !important;
	background-color: #FFFFFF;
	box-shadow: 0px 2px 0px 0px #FB4840;
}
.btn_shadow a:hover {
	color: #FFFFFF !important;
	background-color: #FB4840;
	border: 1px solid #FB4840;
}
.btn_shadow a:after {
	content: "";
	display: block;
	width: 15%;
	height: 5px;
	border-right: 2px solid #FB4840;
	border-bottom: 1px solid #FB4840;
	border-top: none;
	border-left: none;
	transform: skewX(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 25px;
}
.btn_shadow a:hover:after {
	border-right: 2px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}

<div class="btn_input">
<input type="submit" value="確認画面に進む">
</div>

<div class="btn">
<a href="javascript:window.print();">印刷する</a>
</div>

<div class="btn">
<a href="https://goo.gl/maps/qyCatfbEitu" target="_blank">Google Mapで開く</a></a>
</div>

<div class="btn">
<a href="javascript:void(0);" onclick="window.close();return false;">ウィンドウを閉じる</a></a>
</div>