MENU
  1. ホーム
  2. HTML&CSS
  3. 【html&css】コピペで作る！折りたたみ式の続きを読むボタンデザイン4選

【html&css】コピペで作る！折りたたみ式の続きを読むボタンデザイン4選

HTML&CSS
read-more-design

本記事では、カスタマイズ可能な折りたたみ式の「続きを読む」ボタンデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、「続きを読む」の部分を作成するにはinputタグを多用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携
目次

おしゃれなフリー素材デザイン集

本サイトでは、「続きを読む」ボタン以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock
Code Stock | UIコピペサイト UIコピペサイト

高さ制限の折りたたみ式「続きを読む」ボタン

ここでは、以下の高さ制限の折りたたみ式「続きを読む」ボタンデザイン例を記載しています。

高さ制限の折りたたみ式「続きを読む」ボタンデザイン
  • リンク風
  • ボタン風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目も「続きを読む」ボタンページでは選択式でご用意しました。

調整項目一覧
  • リンク色
  • ホバー時のリンク色
  • ボタン色
  • ボタンの形状：四角, 角丸

ご興味があれば「「続きを読む」ボタン一覧ページ」を一読ください。

Code Stock
READ-MORE | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Limit by height 高さで制限する 「Code Stock」はWeb制作の「これが欲しい」を叶える、をテ…

リンク風

「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。

HTMLコード表示
<div class="read-more-1">
  <p>
    「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。
    お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。
    ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。
  </p>
  <label>
    <input type="checkbox"/>
    ...続きを読む
  </label>
</div>
CSSコード表示
.read-more-1 {
  position: relative;
}

.read-more-1 p {
  position: relative;
  max-height: 100px; /* 開く前に見せたい高さを指定 */
  margin-bottom: 0;
  overflow: hidden;
  transition: max-height 1s;
}

.read-more-1:has(:checked) p {
  max-height: 100vh;
}

.read-more-1 p::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
  content: '';
}

.read-more-1:has(:checked) p::after {
  content: none;
}

.read-more-1 label {
  display: flex;
  align-items: center;
  gap: 0 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #4f96f6;
  font-size: .8em;
}

.read-more-1 label:hover {
  color: #c7511f;
  text-decoration: underline;
  cursor: pointer;
}

.read-more-1:has(:checked) label {
  display: none;
}

.read-more-1 label::after {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-color: #b6bdc3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.read-more-1 input {
  display: none;
}

ボタン風

「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。

HTMLコード表示
<div class="read-more-2">
  <p>
    「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。
    お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。
    ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。
  </p>
  <label>
    <input type="checkbox"/>
    ...続きを読む
  </label>
</div>
CSSコード表示
.read-more-2 {
  position: relative;
}

.read-more-2 p {
  position: relative;
  max-height: 100px; /* 開く前に見せたい高さを指定 */
  margin-bottom: 10px;
  overflow: hidden;
  transition: max-height 1s;
}

.read-more-2:has(:checked) p {
  max-height: 100vh;
}

.read-more-2 p::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
  content: '';
}

.read-more-2:has(:checked) p::after {
  content: none;
}

.read-more-2 label {
  display: flex;
  align-items: center;
  gap: 0 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: .4em 1.2em;
  border-radius: 1px;
  background-color: #2589d0;
  color: #fff;
  font-size: .7em;
}

.read-more-2 label:hover {
  border: 1px solid #2589d0;
  background-color: #fff;
  color: #2589d0;
  cursor: pointer;
}

.read-more-2:has(:checked) label {
  display: none;
}

.read-more-2 label::after {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.read-more-2 label:hover::after {
  background-color: #2589d0;
}

.read-more-2 input {
  display: none;
}

行数制限の折りたたみ式「続きを読む」ボタン

ここでは、以下の行数制限の折りたたみ式「続きを読む」ボタンデザイン例を記載しています。

行数制限の折りたたみ式「続きを読む」ボタンデザイン
  • リンク風
  • ボタン風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目も「続きを読む」ボタンページでは選択式でご用意しました。

調整項目一覧
  • リンク色
  • ホバー時のリンク色
  • ボタン色
  • ボタンの形状：四角, 角丸

ご興味があれば「「続きを読む」ボタン一覧ページ」を一読ください。

Code Stock
READ-MORE | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Limit by height 高さで制限する 「Code Stock」はWeb制作の「これが欲しい」を叶える、をテ…

リンク風

「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。

HTMLコード表示
<div class="read-more-3">
  <p>
    「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。
    お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。
    ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。
  </p>
  <label>
    <input type="checkbox"/>
    ...続きを読む
  </label>
</div>
CSSコード表示
.read-more-3 {
  position: relative;
}

.read-more-3 p {
  display: -webkit-box;
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 開く前に見せたい行数を指定 */
}

.read-more-3:has(:checked) p {
  display: block;
}

.read-more-3 p::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
  content: '';
}

.read-more-3:has(:checked) p::after {
  content: none;
}

.read-more-3 label {
  display: flex;
  align-items: center;
  gap: 0 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #4f96f6;
  font-size: .8em;
}

.read-more-3 label:hover {
  color: #c7511f;
  text-decoration: underline;
  cursor: pointer;
}

.read-more-3:has(:checked) label {
  display: none;
}

.read-more-3 label::after {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-color: #b6bdc3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.read-more-3 input {
  display: none;
}

ボタン風

「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。

HTMLコード表示
<div class="read-more-4">
  <p>
    「Code Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。
    お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。
    ちなみにどのコードにおいても、自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。
  </p>
  <label>
    <input type="checkbox"/>
    ...続きを読む
  </label>
</div>
CSSコード表示
.read-more-4 {
  position: relative;
}

.read-more-4 p {
  display: -webkit-box;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 開く前に見せたい行数を指定 */
}

.read-more-4:has(:checked) p {
  display: block;
}

.read-more-4 p::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
  content: '';
}

.read-more-4:has(:checked) p::after {
  content: none;
}

.read-more-4 label {
  display: flex;
  align-items: center;
  gap: 0 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: .4em 1.2em;
  border-radius: 1px;
  background-color: #2589d0;
  color: #fff;
  font-size: .7em;
}

.read-more-4 label:hover {
  border: 1px solid #2589d0;
  background-color: #fff;
  color: #2589d0;
  cursor: pointer;
}

.read-more-4:has(:checked) label {
  display: none;
}

.read-more-4 label::after {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.read-more-4 label:hover::after {
  background-color: #2589d0;
}

.read-more-4 input {
  display: none;
}
HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次