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

4 designs for “Read more” buttons created using only HTML and CSS

There are times when you want to omit long text so that users can open and close it freely to read it. We have put together a snippet of the "Read more" button that is often used in such situations. Everything from three-point leaders and gradations to ones that open and close like an accordion can be implemented with copy and paste.

Limit by height

Like link

Like link

  1. Design Adjustment
  2. Copy HTML
  3. Copy CSS
  4. Completion
step1

Adjust design

  • Animation when opening
Like button

Like button

  1. Design Adjustment
  2. Copy HTML
  3. Copy CSS
  4. Completion
step1

Adjust design

  • Button shape
  • Animation when opening

Limit by rows

Like link

Like link

  1. Design Adjustment
  2. Copy HTML
  3. Copy CSS
  4. Completion
step1

Adjust design

Like button

Like button

  1. Design Adjustment
  2. Copy HTML
  3. Copy CSS
  4. Completion
step1

Adjust design

  • Button shape