ボタン装飾

テキストボタン：テーブルとかに入れられる

<a class="btm_line" rel="noreferrer noopener" href="https://page.line.me/" target="_blank">LINEで問い合わせる</a>


/*ボタンLINE*/
.btm_line{
	background-color:#39b54a;
	border-radius:50px;
	padding:15px 40px!important;
	text-decoration:none;
	text-align:center;
	font-size:1.2em;
}
.btm_line:link{color:#FFFFFF;}
.btm_line:visited{color:#FFFFFF;}
.btm_line:hover{color:#FFFFFF;}
.btm_line:active{color:#FFFFFF;}

デザイン１

ボタンの横幅をそろえる固定

.btm-set a{width:500px!important;}

デザイン２

snow-monkeyのボタン装飾を選択して、テキストに設定。

/*――――――――――――――――――
ボタンの装飾
―――――――――――――――――――*/
.btm_deco1{
	background: linear-gradient(-135deg, #f24585, #f8d72a)!important;
	width:80%!important;
	border-radius:50px;
	text-align:center;
}
.btm_deco1:after {
	font-family: 'FontAwesome';
	content: "\f105";
	color:#FFFFFF;
}

デザイン３

<div class="block">
<div class="element"><a href="http://musashitakumi.goodword.jp/wp/product">商品紹介</a></div>
<div class="element"><a href="http://musashitakumi.goodword.jp/wp/flow">ご注文方法</a></div>
</div>


【CSS】
.block{
	display:table;
	width:100%;
	border-top:solid 2px #272727;
	border-bottom:solid 2px #272727;
	vertical-align:bottom;
}
.element{
	display:table-cell;
	text-align:right;
}
.element:nth-of-type(1){border-right:solid 2px #272727;}
.block a{
	display:block;
	padding-top:50px;
	padding-bottom:20px;
	padding-right:10px;
	text-decoration:none!important;	
}
.block a:hover{
	background:rgba(255, 255, 255, 0.5);
	background:-moz-rgba(255, 255, 255, 0.5);
	background:-webkit-rgba(255, 255, 255, 0.5);
}
.element a:after {
	font-family: 'FontAwesome';
	content: "\f105";
	padding-right: 5px;
	color:#272727;
	padding-left:15px;
}