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

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

高さで制限する「続きを読む」

高さで制限する「続きを読む」のリンク風バージョン

リンク風

step1
デザインを調整する
  • 開く時のアニメーション

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

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

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

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

.read-more-001 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-001:has(:checked) p::after {
    content: none;
}

.read-more-001 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-001 label:hover {
    color: #c7511f;
    text-decoration: underline;
    cursor: pointer;
}

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

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

.read-more-001 input {
    display: none;
}
高さで制限する「続きを読む」のボタン風バージョン

ボタン風

step1
デザインを調整する
  • ボタンの形状
  • 開く時のアニメーション

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

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

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

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

.read-more-003 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-003:has(:checked) p::after {
    content: none;
}

.read-more-003 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-003 label:hover {
    border:1px solid #2589d0;
    background-color: #fff;
    color: #2589d0;
    cursor: pointer;
}

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

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

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

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

行数で制限する「続きを読む」

行数で制限する「続きを読む」のリンク風バージョン

リンク風

step1
デザインを調整する

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

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

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

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

.read-more-002 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-002:has(:checked) p::after {
    content: none;
}

.read-more-002 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-002 label:hover {
    color: #c7511f;
    text-decoration: underline;
    cursor: pointer;
}

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

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

.read-more-002 input {
    display: none;
}
行数で制限する「続きを読む」のボタン風バージョン

ボタン風

step1
デザインを調整する
  • ボタンの形状

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

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

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

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

.read-more-004 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-004:has(:checked) p::after {
    content: none;
}

.read-more-004 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-004 label:hover {
    border:1px solid #2589d0;
    background-color: #fff;
    color: #2589d0;
    cursor: pointer;
}

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

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

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

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