CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSのみでつくる「続きを読む」ボタンのデザイン4選

長い文章を省略してユーザーが自由に開閉して読めるようにしたい、という時ありますよね。そんな時によく使われる「続きを読む」ボタンのスニペットをまとめました。三点リーダー・グラデーション付きのものやアコーディオンのように開閉できるものまで、どれもコピペで実装することが可能です。

高さで制限する

リンク風

リンク風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 開く時のアニメーション
ボタン風

ボタン風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • ボタンの形状
  • 開く時のアニメーション

行数で制限する

リンク風

リンク風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

ボタン風

ボタン風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • ボタンの形状