講座2

画像の上にボタンがピョンッと出るHTMLとCSSを使ってする方法

  • Jo Masafumi
  • Jo Masafumi

次は、ボタンの上にマウスの矢印をのせるとボタンがピョンッと出るHTMLとCSSを使ってする方法をします。

画像の上にボタンがピョンッと出るHTMLとCSSを使ってする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「画像の上にボタンがピョンッと出るHTMLとCSSを使ってする方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<div class="g-pyon-btn1">
ここに画像を入れる
    <div class="haikei">
      <a href="https://jomasafumi.com/" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

貼り付けました。

「ここに画像を入れる」の文字を消します。

文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。

左上の「メディアライブラリ」を押します。

①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「画像の上にボタンがピョンッと出るHTMLとCSSを使ってする方法」の
ボタンの上にマウスの矢印をのせるとボタンがピョンッと出ることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*画像の上にボタンがピョンッと出る（基本）*/
.g-pyon-btn1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn1 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
　font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #fff !important; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn1 .botan:hover {
  filter: brightness(120%); /*色の明るさ*/
}
/*半透明の背景設定*/
.g-pyon-btn1 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn1">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「position: relative;」は、画像を親要素として設定するためのCSSコードです。

「width」の、「450px」の数字が大きくなるほど画像の横幅が大きくなります。

「height」の、「255px」の数字が大きくなるほど画像の高さが大きくなります。

「overflow: hidden;」は、はみだした半透明の背景を非表示にするためのコードです。

「position: absolute;」は、文字を子要素として設定するためのCSSコードです。

「font-size: 1.5em;」は、文字の大きさを設定するコードです。

「padding: 0.5em 1em;」は、ボタンの内側の余白を設定するコードです。

「text-decoration: none !important;」は、ボタンの文字の装飾をなしにするコードです。

「background: #668ad8;」は、ボタンの色を設定するコードです。

「color: #fff;」は、文字の色を設定するコードです。

「top: 50%;」は、画像の上側からどれくらいの距離にボタンを設置するかを設定するためのCSSコードです。

「left: 50%;」は、画像の左側からどれくらいの距離にボタンを設置するかを設定するためのCSSコードです。

「-ms-transform: translate(-50%,-50%);」は、ボタンの基準位置を変更するコードです。

「-ms-transform」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。

「-webkit-transform: translate(-50%,-50%);」は、文字の基準位置を変更するコードです。

「-webkit-transform」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。

「transform: translate(-50%,-50%);」は、ボタンの基準位置を変更するコードです。

「filter: brightness(120%);」は、マウスをボタンの上にのせたときのボタンの色を明るくするコードです。

「transition: all 0.2s ease;」は、ボタンが表示されるまでの時間を設定するためのCSSコードです。

「all」は、すべてのトランジションを適用するときに設定します。

「0.2s」は、変化する時間が0.2秒という意味です。

「ease」は、変化するときの開始と終わりがゆるやかに変化します。

「opacity: 0;」は、半透明の背景の透明度を設定するコードです。

「ここに画像を入れる」の文字を消して、画像を入れてください。

「ここにリンクのURLを入れます」を、他のURLリンクに変えると、リンク先を変えることができます。

画像の上にボタンがピョンッと出る記入例

画像の上にボタンがピョンッと出る（基本）

CSS

/*画像の上にボタンがピョンッと出る（基本）*/
.g-pyon-btn1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn1 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
　font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #fff !important; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn1 .botan:hover {
  filter: brightness(120%); /*色の明るさ*/
}
/*半透明の背景設定*/
.g-pyon-btn1 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn1">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（上から見た）

CSS

/*画像の上にボタンがピョンッと出る（上から見た）*/
.g-pyon-btn2 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn2 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
　font-weight: bold; /*太字*/
  padding: 0.35em 1em; /*余白*/
  background: red;/*背景色*/
  color: #FFF !important; /*文字色*/
  text-decoration: none !important; /*装飾なし*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*ボタンの上側台形部分*/
.g-pyon-btn2 .botan:before {
  content: ""; /**/
  position: absolute; /*絶対配置*/
  top: -16px; /*上側位置*/
  left: 0; /*左側位置*/
  width: -webkit-calc(100% - 0px); /*横幅*/
  width: calc(100% - 0px); /*横幅*/
  height: 0; /*高さ*/
  border: solid 8px transparent; /*ボタン上側　太さ*/
  border-bottom-color: #ff6b85; /*ボタン上側　色*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn2 .botan:hover {
  filter: brightness(150%); /*色の明るさ*/
}
/*半透明の背景設定*/
.g-pyon-btn2 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn2:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn2">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（丸み）

CSS

/*画像の上にボタンがピョンッと出る（丸み）*/
.g-pyon-btn3 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn3 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #fff !important; /*文字色*/
  background: #fd9535;/*背景色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
  font-weight: bold; /*文字太さ*/
  border: solid 2px #d27d00;/*線色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn3 .botan:hover {
  filter: brightness(120%); /*色の明るさ*/
}
/*半透明の背景設定*/
.g-pyon-btn3 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn3:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn3 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn3">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（ふせん）

CSS

/*画像の上にボタンがピョンッと出る（ふせん）*/
.g-pyon-btn4 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn4 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #f7f7f7; /*背景色*/
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c !important;/*文字色*/
  font-weight: bold; /*文字太さ*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn4 .botan:hover {
  filter: brightness(120%); /*色の明るさ*/
}
/*半透明の背景設定*/
.g-pyon-btn4 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn4:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn4 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

HTML

<div class="g-pyon-btn4">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（電源みたい）

CSS

/*画像の上にボタンがピョンッと出る（電源みたい）*/
.g-pyon-btn5 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn5 .botan {
  position: absolute; /*絶対配置*/
  text-decoration: none !important; /*装飾なし*/
  color: blue !important; /*アイコン色*/
  width: 80px; /*横幅*/
  height: 80px; /*縦幅*/
  line-height: 80px; /*行高さ*/
  font-size: 40px; /*アイコンサイズ*/
  border-radius: 50%; /*角丸み*/
  text-align: center; /*中央位置*/
  overflow: hidden; /*非表示*/
  font-weight: bold !important; /*文字太さ*/
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%); /*グラデーション*/
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); /*影*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
  border-bottom: solid 2px #b5b5b5; /*線色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn5 .botan:hover {
  filter: brightness(120%); /*色の明るさ*/
}
/*アイコンの高さ*/
.g-pyon-btn5 i {
  line-height: 80px; /*行高さ*/
}
/*半透明の背景設定*/
.g-pyon-btn5 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn5:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn5 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn5">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan"><i class="fa fa-power-off"></i></a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

画像の上にボタンがピョンッと出る（色変わる）

CSS

/*画像の上にボタンがピョンッと出る（色変わる）*/
.g-pyon-btn6 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn6 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  padding: 0.3em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #67c5ff !important; /*文字色*/
  border: solid 2px #67c5ff; /*枠線*/
  border-radius: 3px; /*角丸み*/
  transition: .4s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn6 .botan:hover {
  background: #67c5ff; /*背景色*/
  color: white !important; /*文字色*/
}
/*半透明の背景設定*/
.g-pyon-btn6 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn6:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn6 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn6">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（両端線）

CSS

/*画像の上にボタンがピョンッと出る（両端線）*/
.g-pyon-btn7 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn7 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*余白*/
  border-left: solid 4px #668ad8; /*左線*/
  border-right: solid 4px #668ad8; /*右線*/
  color: #668ad8 !important; /*文字色*/
  background: #e1f3ff; /*背景色*/
  transition: .4s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn7 .botan:hover {
  background: #668ad8 !important; /*背景色*/
  color: #FFF !important; /*文字色*/
}
/*半透明の背景設定*/
.g-pyon-btn7 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn7:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn7 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn7">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（アイコン付き）

CSS

/*画像の上にボタンがピョンッと出る（アイコン付き）*/
.g-pyon-btn8 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn8 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #00bcd4; /*背景色*/
  transition: .4s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn8 .botan:hover {
  background: #1ec7bb; /*背景色*/
  color: yellow !important; /*文字色*/
}
/*アイコン表示用*/
.g-pyon-btn8 .botan:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: yellow;/*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-btn8 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn8:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn8 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn8">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（グラデーション）

CSS

/*画像の上にボタンがピョンッと出る（グラデーション）*/
.g-pyon-btn9 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn9 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #5e7fca; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn9 .botan:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn9 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.2s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn9:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-btn9 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn9">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（上からスライド）

CSS

/*画像の上にボタンがピョンッと出る（上からスライド）*/
.g-pyon-btn10 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn10 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#ff4800 0%, #2c00ff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #ff8300; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn10 .botan:hover {
  background-image: linear-gradient(#ff4800 0%, #2c00ff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn10 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn10:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-btn10 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn10">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（下からスライド）

CSS

/*画像の上にボタンがピョンッと出る（下からスライド）*/
.g-pyon-btn11 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn11 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#3800ff 0%, #00ffcf 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px#2900bd; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn11 .botan:hover {
  background-image: linear-gradient(#3800ff 0%, #00ffcf 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn11 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn11:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-btn11 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn11">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（左からスライド）

CSS

/*画像の上にボタンがピョンッと出る（左からスライド）*/
.g-pyon-btn12 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn12 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#ffa700 0%, #f00 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #ff9f9f; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn12 .botan:hover {
  background-image: linear-gradient(#ffa700 0%, #f00 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn12 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0%; /*上側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn12:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-btn12 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn12">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（右からスライド）

CSS

/*画像の上にボタンがピョンッと出る（右からスライド）*/
.g-pyon-btn13 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn13 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#4f0 0%, #ffef00 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #00c87d; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn13 .botan:hover {
  background-image: linear-gradient(#4f0 0%, #ffef00 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn13 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0%; /*上側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn13:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-btn13 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn13">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（ボタンが大きくなる）

CSS

/*画像の上にボタンがピョンッと出る（ボタンが大きくなる）*/
.g-pyon-btn14 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn14 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#b9b9b9 0%, #000 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #000; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn14 .botan:hover {
  background-image: linear-gradient(#b9b9b9 0%, #000 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn14 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn14:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1.5); /*ボタンを大きくする*/
  -webkit-transform: scale(1.5); /*ボタンを大きくする*/
  transform: scale(1.5); /*ボタンを大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-btn14 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn14">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（中心から大きくなる）

CSS

/*画像の上にボタンがピョンッと出る（中心から大きくなる）*/
.g-pyon-btn15 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn15 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#b9b9b9 0%, #000 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #000; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn15 .botan:hover {
  background-image: linear-gradient(#b9b9b9 0%, #000 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn15 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -ms-transform: scale(0); /*ボタンを大きくする*/
  -webkit-transform: scale(0); /*ボタンを大きくする*/
  transform: scale(0); /*ボタンを大きくする*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn15:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1); /*ボタンを大きくする*/
  -webkit-transform: scale(1); /*ボタンを大きくする*/
  transform: scale(1); /*ボタンを大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-btn15 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn15">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（縦回転）

CSS

/*画像の上にボタンがピョンッと出る（縦回転）*/
.g-pyon-btn16 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn16 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: black !important; /*文字色*/
  background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #00f3ff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn16 .botan:hover {
  background-image: linear-gradient(#fff 0%, #00cfff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn16 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -ms-transform: rotateX(180deg); /*縦回転*/
  -webkit-transform: rotateX(180deg); /*縦回転*/
  transform: rotateX(180deg); /*縦回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn16:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateX(0deg); /*縦回転*/
  -webkit-transform: rotateX(0deg); /*縦回転*/
  transform: rotateX(0deg); /*縦回転*/
}
/*画像の大きさ設定*/
.g-pyon-btn16 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn16">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（横回転）

CSS

/*画像の上にボタンがピョンッと出る（横回転）*/
.g-pyon-btn17 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn17 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: white !important; /*文字色*/
  background-image: linear-gradient(#9895ff 0%, #6800ff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #30ffe2; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn17 .botan:hover {
  background-image: linear-gradient(#9895ff 0%, #6800ff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn17 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -ms-transform: rotateY(180deg); /*横回転*/
  -webkit-transform: rotateY(180deg); /*横回転*/
  transform: rotateY(180deg); /*横回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn17:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateY(0deg); /*横回転*/
  -webkit-transform: rotateY(0deg); /*横回転*/
  transform: rotateY(0deg); /*横回転*/
}
/*画像の大きさ設定*/
.g-pyon-btn17 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn17">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（回転）

CSS

/*画像の上にボタンがピョンッと出る（回転）*/
.g-pyon-btn18 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn18 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #000 !important; /*文字色*/
  background-image: linear-gradient(#fff 0%, #ffc106 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px white; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn18 .botan:hover {
  background-image: linear-gradient(#fff 0%, #ffc106 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn18 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  transition: all 0.5s ease; /*ボタンが表示されるまでの時間*/
  -ms-transform: rotate(0deg); /*回転*/
  -webkit-transform: rotate(0deg); /*回転*/
  transform: rotate(0deg); /*回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn18:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotate(360deg); /回転*/
  -webkit-transform: rotate(360deg); /*回転*/
  transform: rotate(360deg); /*回転*/
}
/*画像の大きさ設定*/
.g-pyon-btn18 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn18">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（上からボタンが画像を押し出す）

CSS

/*画像の上にボタンがピョンッと出る（上からボタンが画像を押し出す）*/
.g-pyon-btn19 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn19 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #000 !important; /*文字色*/
  background-image: linear-gradient(#fff 0%, #fff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #f00; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  bottom: 0%; /*下側に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
  transform: translate(-50%,0%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn19 .botan:hover {
  background-image: linear-gradient(#fff 0%, #fff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn19 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn19:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(88px); /*縦方向に移動*/
  -webkit-transform: translateY(88px); /*縦方向に移動*/
  transform: translateY(88px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn19 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn19:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(88px); /*縦方向に移動*/
  -webkit-transform: translateY(88px); /*縦方向に移動*/
  transform: translateY(88px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-btn19">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（上からボタンが押し出して切り替わる）

CSS

/*画像の上にボタンがピョンッと出る（上からボタンが押し出して切り替わる）*/
.g-pyon-btn20 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn20 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: black !important; /*文字色*/
  background-image: linear-gradient(#009110 0%, #a3ffd4 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #fff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn20 .botan:hover {
  background-image: linear-gradient(#009110 0%, #a3ffd4 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn20 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn20:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(255px); /*縦方向に移動*/
  -webkit-transform: translateY(255px); /*縦方向に移動*/
  transform: translateY(255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn20 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn20:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(255px); /*縦方向に移動*/
  -webkit-transform: translateY(255px); /*縦方向に移動*/
  transform: translateY(255px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-btn20">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（下からボタンが画像を押し出す）

CSS

/*画像の上にボタンがピョンッと出る（下からボタンが画像を押し出す）*/
.g-pyon-btn21 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn21 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: yellow !important; /*文字色*/
  background-image: linear-gradient(#38ff00 0%, #af00ff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #0010ff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 0%; /*上側に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
  transform: translate(-50%,0%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn21 .botan:hover {
  background-image: linear-gradient(#38ff00 0%, #af00ff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn21 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn21:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-88px); /*縦方向に移動*/
  -webkit-transform: translateY(-88px); /*縦方向に移動*/
  transform: translateY(-88px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn21 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn21:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-88px); /*縦方向に移動*/
  -webkit-transform: translateY(-88px); /*縦方向に移動*/
  transform: translateY(-88px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-btn21">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（下からボタンが押し出して切り替わる）

CSS

/*画像の上にボタンがピョンッと出る（下からボタンが押し出して切り替わる）*/
.g-pyon-btn22 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn22 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: white !important; /*文字色*/
  background-image: linear-gradient(#0800ff 0%, #00ffe7 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #0040ff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn22 .botan:hover {
  background-image: linear-gradient(#0800ff 0%, #00ffe7 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn22 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn22:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-255px); /*縦方向に移動*/
  -webkit-transform: translateY(-255px); /*縦方向に移動*/
  transform: translateY(-255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn22 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn22:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-255px); /*縦方向に移動*/
  -webkit-transform: translateY(-255px); /*縦方向に移動*/
  transform: translateY(-255px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-btn22">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（左からボタンが画像を押し出す）

CSS

/*画像の上にボタンがピョンッと出る（左からボタンが画像を押し出す）*/
.g-pyon-btn23 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn23 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: black !important; /*文字色*/
  background-image: linear-gradient(#fffb00 0%, #14ff00 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #00ff28; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  right: 0%; /*右側に表示*/
  -ms-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
  transform: translate(0%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn23 .botan:hover {
  background-image: linear-gradient(#fffb00 0%, #14ff00 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn23 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn23:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(38%); /*横方向に移動*/
  -webkit-transform: translateX(38%); /*横方向に移動*/
  transform: translateX(38%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn23 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn23:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(38%); /*横方向に移動*/
  -webkit-transform: translateX(38%); /*横方向に移動*/
  transform: translateX(38%); /*横方向に移動*/
}

HTML

<div class="g-pyon-btn23">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（左からボタンが押し出して切り替わる）

CSS

/*画像の上にボタンがピョンッと出る（左からボタンが押し出して切り替わる）*/
.g-pyon-btn24 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn24 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: yellow !important; /*文字色*/
  background-image: linear-gradient(#007cff 0%, #2c00ff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #00dbff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  right: 50%; /*真ん中に表示*/
  -ms-transform: translate(50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn24 .botan:hover {
  background-image: linear-gradient(#007cff 0%, #2c00ff 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn24 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn24:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn24 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn24:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-btn24">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（右からボタンが画像を押し出す）

CSS

/*画像の上にボタンがピョンッと出る（右からボタンが画像を押し出す）*/
.g-pyon-btn25 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn25 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #000 !important; /*文字色*/
  background-image: linear-gradient(#ffcb00 0%, #fffb00 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #fff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 0%; /*左側に表示*/
  -ms-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
  transform: translate(0%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn25 .botan:hover {
  background-image: linear-gradient(#ffcb00 0%, #fffb00 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn25 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn25:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-38%); /*横方向に移動*/
  -webkit-transform: translateX(-38%); /*横方向に移動*/
  transform: translateX(-38%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn25 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn25:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-38%); /*横方向に移動*/
  -webkit-transform: translateX(-38%); /*横方向に移動*/
  transform: translateX(-38%); /*横方向に移動*/
}

HTML

<div class="g-pyon-btn25">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（右からボタンが押し出して切り替わる）

CSS

/*画像の上にボタンがピョンッと出る（右からボタンが押し出して切り替わる）*/
.g-pyon-btn26 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn26 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: yellow !important; /*文字色*/
  background-image: linear-gradient(#900 0%, #f00 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #fff; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn26 .botan:hover {
  background-image: linear-gradient(#900 0%, #f00 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn26 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn26:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-btn26 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-btn26:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-btn26">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
    </div>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（上下スライド）

CSS

/*画像の上にボタンがピョンッと出る（上下スライド）*/
.g-pyon-btn27 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn27 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: yellow !important; /*文字色*/
  background-image: linear-gradient(#006810 0%, #1bca02 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #00ff10; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  visibility: hidden; /* ボタンを表示しない */
  opacity: 0; /* ボタン非表示 */
  -ms-transition: visibility 1s step-end; /*ボタン表示時間*/
  -webkit-transition: visibility 1s step-end; /*ボタン表示時間*/
  transition: visibility 1s step-end; /*ボタン表示時間*/
}
/*ボタン表示用*/
.g-pyon-btn27:hover .botan{
  visibility: visible; /* アイコン表示 */
  opacity: 1; /* アイコン表示 */
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn27 .botan:hover {
  background-image: linear-gradient(#006810 0%, #1bca02 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn27 .haikei1, .g-pyon-btn27 .haikei2 {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  left: 0%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*上側スライド*/
.g-pyon-btn27 .haikei1 {
  top: -50%; /* 枠の上に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn27:hover .haikei1 {
  top: 0px; /* 下へスライド */
}
/*下側スライド*/
.g-pyon-btn27 .haikei2 {
  bottom:	 -50%; /* 枠の下に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn27:hover .haikei2 {
  bottom:	 0px; /* 上へスライド */
}
/*画像の大きさ設定*/
.g-pyon-btn27 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn27">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む

画像の上にボタンがピョンッと出る（左右スライド）

CSS

/*画像の上にボタンがピョンッと出る（左右スライド）*/
.g-pyon-btn28 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ボタンの設定*/
.g-pyon-btn28 .botan {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: yellow !important; /*文字色*/
  background-image: linear-gradient(#6800ff 0%, #ff00a7 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #ff00fb; /*下線*/
  transition: all .3s ease 0s; /*変化時間*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
  visibility: hidden; /* ボタンを表示しない */
  opacity: 0; /* ボタン非表示 */
  -ms-transition: visibility 1s step-end; /*ボタン表示時間*/
  -webkit-transition: visibility 1s step-end; /*ボタン表示時間*/
  transition: visibility 1s step-end; /*ボタン表示時間*/
}
/*ボタン表示用*/
.g-pyon-btn28:hover .botan{
  visibility: visible; /* アイコン表示 */
  opacity: 1; /* アイコン表示 */
}
/*マウスをボタンの上にのせたとき*/
.g-pyon-btn28 .botan:hover {
  background-image: linear-gradient(#6800ff 0%, #ff00a7 70%); /*グラデーション*/
}
/*半透明の背景設定*/
.g-pyon-btn28 .haikei1, .g-pyon-btn28 .haikei2 {
  position: absolute; /*絶対配置*/
  width: 50%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*上側の位置*/
  top: 0%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*ボタンが表示されるまでの時間*/
  transition: all 1s ease; /*ボタンが表示されるまでの時間*/
}
/*左側スライド*/
.g-pyon-btn28 .haikei1 {
  left: -50%; /* 枠の左に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn28:hover .haikei1 {
  left: 0px; /* 右へスライド */
}
/*右側スライド*/
.g-pyon-btn28 .haikei2 {
  right: -50%; /* 枠の右に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-btn28:hover .haikei2 {
  right: 0px; /* 左へスライド */
}
/*画像の大きさ設定*/
.g-pyon-btn28 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-btn28">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank" class="botan">続きを読む</a>
</div>

「ここに画像を入れる」の文字を消して、画像を入れてください。
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

記事をプレビュー表示したとき

続きを読む