HTMLとCSSのコピペでできる5つのCTAブロック

19分

CTAブロックのイラスト

SHARE

LPのでは、CTAのデザインをいじるだけででもCVRが劇的に変わったりします。

多くの場合、ボタンやリンクのをCTAに設置しますがブロック単位でデザインをしてみるのも方法の一つです。

今回は、HTMLとCSSのコピペでできる5つのCTAブロックについてご紹介します。

オーバーレイのCTAブロック

1カラムよりは、2カラムのメディアのCTAに使えそうな大きめのCTAです。

jsを一部使っており、CSSの .base .overlay をいじるとオーバーレイの色や角度を変更可能です。

デザイナーのライフハックメディア DESIGN DESIGN.
ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
さらに詳しく見る

コードを表示する

HTML 

<div class="landing">
  <div class="base">
    <div class="image">
      <img src="https://dubdesign.net/wp-content/uploads/2020/12/fvvisual-3.svg" />
    </div>
    <div class="copy">
      <div class="logo">
        <img src="https://dubdesign.net/wp-content/uploads/2020/04/dub_logo_new-4.svg">
      </div>
      <div class="title">
        <small>デザイナーのライフハックメディア</small> DESIGN ReDESIGN.</div>
      <div class="text">ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。<br />ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。<br />ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。<br /> ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。</div>
      <a class="cta" target="_blank">さらに詳しく見る</a>
    </div>
  </div>
</div>

CSS 

/*--------------------
CTA_01
--------------------*/
.landing {
  position: relative;
  z-index: 2;
  max-width: 710px;
  min-height: 475px;
  margin: 25px auto;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.landing .logo img {
  height:100%;
  width: 200px;
}
.landing .base {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 38px;
  color: #082352;
  background: #fff;
}
.landing .image {
  display: none;
}

/*--------------------
CTA_01_Copy
--------------------*/
.copy {
  position: relative;
  z-index: 2;
}
.copy .title {
  font-size: 52px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 30px;
  margin-left: -3px;
  background-image: linear-gradient(45deg, #005FA0, #1C7BAF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.copy .title small {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 10px;
  line-height: 1;
  display: block;
  text-indent: 3px;
}
.copy .text {
  color: #005FA0;
  max-width: 500px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.copy .cta {
  cursor: pointer;
  margin-top: 40px;
  background: linear-gradient(25deg, #7fc3ff, #0090FF);
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 30px;
  text-decoration: none;
  padding: 10px 30px;
  font-weight: 600;
}

/*--------------------
CTA_01_Overlay
--------------------*/
.base.overlay {
  z-index: 2;
  clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px);
  color: #fff;
  background: linear-gradient(45deg, #082352, #0090FF);
  transition: all 0.6s ease-in-out;
  transform-origin: 0 0;
}
.base.overlay.over {
  clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px);
}
.base.overlay .logo svg {
  fill: #fff;
}
.base.overlay .image {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
}
.base.overlay .image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  background: linear-gradient(42deg, #7fc3ff, #0090FF);
  opacity: 0.8;
}
.base.overlay .title {
  background-image: linear-gradient(0, #fff, #fff);
}
.base.overlay .text {
  color: #fff;
}
.base.overlay .cta {
  background: #fff;
  color: #0090FF;
}

@media screen and (max-width: 480px) {
/* （ここにモバイル用スタイルを記述） */
.landing {
  min-height: 555px;
}
.base.overlay {
    clip-path: polygon(145px 0, 710px 0, 710px 530px, 390px 530px);
}
}

JS 

$('.base').clone().addClass('overlay').appendTo('.landing');
$('.cta').hover(function() {
  $('.overlay').toggleClass('over');
});

/*--------------------
CTA_01_js
--------------------*/
setTimeout(function() {
  $('.overlay').addClass('over').delay(600).queue(function() {
    $(this).removeClass("over").dequeue();
  });
}, 400)

斜めに色が入ったCTAブロック

左側のブロックは .cat02webpage で色味やバックグラウンドの画像など変更ができ、.right-triangle が右側の画像を変更できるclassです。

デザイナーのライフハックメディア

DESIGN
ReDESIGN

コードを表示する

HTML 

 <div class="cat02webpage">     
     <div class="white-brand-box"><img src="https://dubdesign.net/wp-content/uploads/2020/10/white_logoonly-1.svg"></div>
   
   <p class="presents-text">デザイナーのライフハックメディア</p>
   
   <p class="cta02title">DESIGN <br/> ReDESIGN</p>
   
   <button class="cta02cta-button">
   もっと詳しく見る
   </button>
   
   <div class="right-triangle">
   </div>
   
 </div>

CSS 

/* CTA_02 */
.cat02webpage {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 3%;
  width: 100%;
  height: 400px;
  background: linear-gradient(rgba(0, 95, 160, 0.85), rgba(17, 129, 191, 0.95)), url("https://dubdesign.net/wp-content/uploads/2020/10/babkbottom.png");
  z-index: 1;
  -webkit-box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.3);
}

.right-triangle {
  position: absolute;
  bottom: 0%;
  right: 0%;
  height: 100%;
  width: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)), url("https://dubdesign.net/wp-content/uploads/2020/10/babkbottom.png");
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.white-brand-box {
  position: absolute;
  width: 200px;
  top: 15%;
  left: 10.5%;
  z-index: 2;
}

.presents-text {
  position: absolute;
  top: 30%;
  left: 10.5%;
  color: #c8e4ff;
  font-size: 16px;
  font-weight: 300;
}

.cta02title {
  position: absolute;
  top: 36%;
  left: 10%;
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  line-height:1.2
}

.cta02cta-button {
  position: absolute;
  width: 180px;
  display: block;
  left: 10%;
  top: 70%;
  background: #FF0000;
  border-radius: 0%;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  transition: .4s;
}

.cta02cta-button:hover {
  background: #91b5fb;
}

@media all and (max-width: 600px) {
  .cat02webpage {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 10px;
    width: 300px;
    height: 200px;
    z-index: 1;
  }

  .white-brand-box {
    border: solid 3px #ffffff;
  }

  .presents-text {
    font-size: 8px;
  }

  .cta02title {
    font-size: 24px;
  }

  .cta02cta-button {
    font-size: 6px;
  }

  .branding-logo {
    border: solid 3px #ffffff;
  }
}

サルワカさん風のもっと見る風CTA

当サイトでも利用しているテーマ SANGO を作った、サルワカさんのサイトにある「さらに見る」風のCTAブロックです。

イラストと併用すると可愛らしいデザインになります。

同じカテゴリーの記事
このカテゴリーの記事一覧
もっと見る

コードを表示する

HTML 

<div class="cta03_tb readmore">
<div class="cta03img"><img src="https://dubdesign.net/wp-content/uploads/2020/07/iso_illust.svg" alt="同じカテゴリーの記事" /></div>
<div class="cta03img readmorebtn"><span class="bl">このカテゴリーの記事一覧</span><br><a href="#"><i class="fa fa-caret-right"></i> もっと見る</a></div>
</div>

CSS 

/* cta_03 */
.cta03_tb.readmore {
    max-width: 100%;
    background: #c8e4ff;
    margin: 0;
}
.cta03_tb {
    margin-bottom: 1.8em;
    display: table;
    min-height: 47px;
    width: 100%;
}

.cta03_tb.readmore .cta03img {
    width: 50%;
    text-align: center;
    font-size: 17px;
}
.cta03img {
    display: table-cell;
    vertical-align: middle;
}
.cta03_tb.readmore img {
    width: 100%;
    padding: 3%;
}
.cta03_tb.readmore .cta03img {
    width: 50%;
    text-align: center;
    font-size: 17px;
}
.cta03img {
    display: table-cell;
    vertical-align: middle;
}
.cta03_tb.readmore .bl {
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    color: #005fa0;
    font-weight: 700;
    line-height: 1;
}
.cta03_tb.readmore .bl:before {
    left: 0;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.cta03_tb.readmore .bl:after {
    right: 0;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
.cta03_tb.readmore .bl:before, .cta03_tb.readmore .bl:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 3px;
    background-color: #005fa0;
    content: "";
    margin: auto -5px;
}

.cta03_tb.readmore a {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    background: #6bb6ff;
    border-bottom: solid 4px #005fa0;
    padding: 0.5em 1.5em;
    border-radius: 5px;
    text-decoration: none;
    transition: .2s;
}
.cta03_tb.readmore a:hover {
    border: none;
}

@media screen and (max-width: 600px){
.cta03_tb.readmore .cta03img, .cta03_tb.readmore {
    width: 100%;
    display: block;
}
.cta03_tb.readmore .mottobtn {
    padding-bottom: 1.5em;
}
}

縦に長めのCTAブロック

縦に長めのCTAのブロックです。

ヘッドラインに「お困りごとありませんか？」を置き、li でこんなことありませんか？の内容を記述しています。

ダミーダミーダミー
こんなお困りごとはありませんか？

  • お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。
  • お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。
  • お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。

一つでも該当する方は、お気軽にご相談ください

相談してみる

コードを表示する

HTML 

<div id="cta04" class="wow zoomIn">
                                <p class="cta04title">WEBサイトのカスタマイズで<br>こんなお困りごとはありませんか？</p>
                                <img src="https://dubdesign.net/wp-content/uploads/2020/10/fvimage1014-1.png"  alt="" class="lazyload">
<ul>
                                    <li>お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。</li>
                                    <li>お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。</li>
                                    <li>お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。お困りごとのダミー。</li>
                                </ul>
                                <p class="ctatext04">一つでも該当する方は、お気軽にご相談ください</p>
                                <a href="#" target="_blank">相談してみる</a>
                            </div>

CSS 

#cta04 {
    width: 100%;
    padding: 20px;
    background: #555;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-size: 120%;
}

#cta04 .cta04title {
    font-size:1.6em;
    font-weight:600;
    margin-top:0;
    line-height: 1.3;
}

#cta04 img {
    margin-bottom: 20px;
}
#cta04 ul {
    margin: -30px 0 30px 0px;
    list-style: none;
    border:none;
    padding: 0;
}

#cta04 ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: silver;
    content: "\f105";
    padding-left: 0;
    margin-right: 15px;
    line-height:  1.8;
}

#cta04 a {
    width: 100%;
    height: 60px;
    margin: 0 auto;
    line-height: 62px;
    color: #fff;
    text-align: center;
    background: #0090ff;
    box-shadow: 0 4px 0 rgba(0,95,160,1);
    display: block;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.09);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
#cta04 a:hover {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    box-shadow: none;
}

#cta04 .ctatext04 {
    display: inline-block;
    position: relative;
    margin:0;
}

.ctatext04:before, .ctatext04:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 22px;
    height: 2px;
    border-radius: 3px;
    background-color: #FFF;
    content: "";
    margin: auto -30px;
}
.ctatext04:before {
transform: rotate(50deg);
}
.ctatext04:after {
transform: rotate(-50deg);
margin-left: 10px;
} 
@media screen and (min-width: 768px){
#cta04 {
    padding: 50px 60px;
}
#cta04 img {
    max-width: 100%;
    height: auto;
    width: auto;
}
#cta04 ul {
    text-align: left;
}
}
@media screen and (max-width: 600px){
#cta04 {
    padding: 20px 25px 40px;
    background: #707070;
}

#cta04 .cta04title {
    font-size: 1.1em;
    margin-top: 20px;
    line-height: 1.5;
}
#cta04 ul li {
    font-size: 0.8em;
    text-align: left;
    line-height: 1.4;
}
#cta04 .ctatext04 {
    font-size: 0.6em;
}
.ctatext04:before, .ctatext04:after {
width:15px;
}
#cta04 img {
    margin-bottom: 40px;
}
}

2つCVボタンのCTAブロック

2つのCVボタンがついたブロックで、ボタン周りは .cta05-button のclassで記述しています。

サイトのトーン&マナーに準拠しすぎると埋もれそうなので、色を外して目立たせるのもいいかもしれません。

困ったときこそダミー。ダミーのコピーダミーのコピー

コードを表示する

HTML 

<div class="cta05-cvset">
    <div class="cta05-inner">
      <p class="cta05-cvset-title"><small class="deco">困ったときこそダミー。</small>ダミーのコピーダミーのコピー</p>
        <ul class="cta05-cvset-list">
            <li>
                <img src="https://dubdesign.net/wp-content/uploads/2020/07/iso_illust.svg" alt="">
                <a href="#" class="cta05-button dwl"><small>1分でわかるWEBサイト</small>資料ダウンロード</a>
            </li>
            <li>
                <img src="https://dubdesign.net/wp-content/uploads/2020/07/iso_illust.svg" alt="">
                <a href="#" class="cta05-button dmo free"><small>実際の悩みごとを相談して解決</small>悩み事をお気軽に相談</a>
            </li>
        </ul>
    </div>
</div>

CSS 

/* CTA_05 */

.cta05-cvset {
    padding: 100px 0 0;
}

.cta05-cvset .cta05-inner {
    background-color: #e8f3fc;
    padding: 10px 0 20px;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.cta05-cvset .cta05-inner ul {
    list-style:none;
    margin-top: 40px;
    padding-inline-start:0;
    border: none;
    padding: 0;
}

.cta05-cvset-title {
    position: relative;
    font-size: 1.8em;
    line-height: 0.6em;
    font-weight: 800;
    font-style: normal;
    letter-spacing: .1em;
    position: absolute;
    top: -10px;
    left: 0;
    text-align: center;
    width: 100%;
}
.cta05-cvset-title .deco {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #005fa0;
    white-space: nowrap;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.cta05-cvset-title .deco:before, .cta05-cvset-title .deco:after {
    display: inline-block;
    position: absolute;
    top: 42%;
    width: 28px;
    height: 2px;
    border-radius: 3px;
    background-color: #005fa0;
    content: "";
    margin: auto -35px;
}
.cta05-cvset-title .deco:before {
    left: 0;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.cta05-cvset-title .deco:after {
    right: 0;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.cta05-cvset-list {
    display: flex;
    width: 100%;
    max-width: 780px;
    justify-content: space-between;
    margin: 0 auto;
}
.cta05-cvset-list li {
    max-width: 360px;
    width: 100%;
    margin: 0 5px;
}
.cta05-cvset-list img {
    width:100%;
    text-align:center;
}
.cta05-button.dwl, .cta05-button.etm {
    background-color: #fff;
    border: 3px solid #005fa0;
    color: #005fa0;
}
.cta05-button.dwl, .cta05-button.dmo, .cta05-button.etm {
    height: 96px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
    flex-direction: column;
    white-space: nowrap;
    text-decoration: none;
}
.cta05-button.dmo {
    background-color: #005fa0;
    border: 3px solid #005fa0;
    color: #fff;
}
.cta05-button {
    position: relative;
    display: flex;
    width: 100%;
    height: 72px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    margin: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 6px 10px -2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.2);
    transition: 0.2s ease-in-out;
}
.cta05-button.free::after {
    content: "無料";
    position: absolute;
    display: block;
    top: -17px;
    right: 8px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    background-color: #FF0000;
    color: #fff;
    border-radius: 16px;
}
.cta05-button.dwl:hover, .cta05-button.dmo:hover, .cta05-button.etm:hover {
    background-color: #6bb6ff;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.cta05-button.dwl small, .cta05-button.dmo small, .cta05-button.etm small {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0;
    margin-bottom: 4px;
    white-space: nowrap;
}

@media screen and (max-width: 768px){
.cta05-cvset .cta05-inner {
    padding: 40px 20px 32px;
}
.cta05-cvset-list {
    flex-direction: column;
    align-items: center;
    padding-bottom: 16px;
}
.cta05-button.dwl small, .cta05-button.dmo small, .cta05-button.etm small {
    font-size: 12px;
}
}

前の記事

clarityのイラスト
無料のヒートマップツール「Microsoft Clarity」…

次の記事

日付の出力
投稿日時の出力

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら