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

2022/12/222022/12/22

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

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

リンク風

リンク色：#4f96f6
ホバー時のリンク色：#c7511f
開く時のアニメーションありなし

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

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

.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;
}

ボタン風

ボタン色：#2589d0
ボタンの形状四角角丸
開く時のアニメーションありなし

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

.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;
}

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

リンク風

リンク色：#4f96f6
ホバー時のリンク色：#c7511f

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

.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;
}

ボタン風

ボタン色：#2589d0
ボタンの形状四角角丸

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

.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;
}