追尾と相性が良い【CVボタンデザイン】マイクロコピー付きでコンバージョン率をあげる

/************************************
** CVボタン
************************************/
.p-cv-btn-wrap *{
	margin:0 !important;
	padding:0 !important;
	box-sizing: border-box;
}
.p-cv-btn-wrap{
	background:#f7f7f7;
	padding:1.5em !important;
	margin: 0 0 2em !important;
	font-size:16px;
	line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
	max-width:350px;
	margin: auto !important;
	border:none;
}
.p-cv-btn-wrap ul li{
	font-weight:500;
	list-style:none;
	font-size:0.9em;
	position:relative;
	padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c" !important;
	font-weight:600;
	color:#1d89b5;
	position:absolute;
	left: 0 !important;
	top: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
.p-cv-btn a{
	color:#fff;
	text-decoration:none !important;
	background:#90c231;
	border-bottom: solid 4px #61841f;
	padding: 0.5em 1em !important;
	border-radius: 7px;
	margin: 0.3em auto !important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.p-cv-btn:hover{
	opacity:0.9;
}
.p-cv-btn a:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
}
.p-cv-btn .p-cv-em{
	font-size:0.9em;
	line-height: 1.3;
	text-align:center;
	font-weight:600;
	display:block;
	color:#90c231;
	background:#fff;
	padding: 5px 10px !important;
	margin: 2px 10px 0px 0 !important;
	border-radius: 30px;
	min-width: 55px;
	max-width: 80px;
}
.p-cv-btn .p-cv-text{
	font-size:0.9em;
	font-weight: 600;
	color:#fff;
	letter-spacing: 1px;
	border-left: 1px solid #fff;
	line-height: 25px;
	margin: 0.6em auto 0.6em 0 !important;
	padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
	color:#fff;
	min-width:22px;
}
.p-cv-url-wrap{
	font-size: 0.8em !important;
	max-width: 350px;
	margin: 0 auto 0.5em !important;
	display: block;
}
.p-cv-url-wrap a{
	color: #1a0dab !important;
	text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
	font-size:0.9em;
	border: 1px solid #90c231;
	margin-top:0.5em !important;
	padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
	background:#fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
/*320px以下*/
@media screen and (max-width: 320px){
	.p-cv-btn-wrap{
		padding:1em !important;
	}
}

<div class="p-cv-btn-wrap">
<ul>
<li>簡単5分登録</li>
<li>別途料金は発生しません</li>
</ul>
<p class="p-cv-btn">
<a href="https://www.google.com/">
<span class="p-cv-em">無料</span>
<span class="p-cv-text">公式HPはこちら</span><i class="fas fa-chevron-circle-right"></i>
</a>
</p>
<p class="p-cv-url-wrap">リンク先：<a href="https://www.google.com/">https://www.google.com/</a></p>
<p class="p-cv-note">現在キャンペーン中！終了まで残りわずか！</p>
</div>

<div class="p-cv-btn-wrap">
<div class="p-cv-btn-img"><a href="リンクURL"><img src="画像URL" width="横幅"></a></div>
<ul>
<li>簡単5分登録</li>
<li>別途料金は発生しません</li>
</ul>
<p class="p-cv-btn">
<a href="https://www.google.com/">
<span class="p-cv-em">無料</span>
<span class="p-cv-text">公式HPはこちら</span><i class="fas fa-chevron-circle-right"></i>
</a>
</p>
<p class="p-cv-url-wrap">リンク先：<a href="https://www.google.com/">https://www.google.com/</a></p>
<p class="p-cv-note">現在キャンペーン中！終了まで残りわずか！</p>
</div>

.p-cv-btn-img{
	margin:0 auto !important;
	text-align:center;
	max-width:350px;
	display:block;
}