境界線にも表示！CSSで作るグラデーションボタン

@ハクト 2023-08-29 11:44:09に投稿

グラデーションを使用したボタンをまとめました。

境界線をグラデーションにしたものや、ホバー時にグラデーションが変化するものなどを実装しています。

下記ソースより確認してください。

境界線とテキストをグラデーションにしたCSSボタン

border」「border-image」「border-image-slice」を指定し境界線をグラデーションにしています。

コードを表示

<a class="btn-grad-border">CSSボタン</a>

.btn-grad-border {
    cursor: pointer;
    padding: 15px 45px;
    border: 4px solid transparent;
    border-image: linear-gradient(45deg, #f736d3 10%, #f78136 90%);
    border-image-slice: 1;
    background: linear-gradient(45deg, #f736d3 10%, #f78136 90%);
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    font-weight: bold;
    text-decoration: none;
    transition: all 1s;
}

.btn-grad-border:hover {
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #fff;
    animation: 1s backgroundAnime;
}

@keyframes backgroundAnime {
    from {
        background-size: 0% 100%;
    }

to {
    background-size: 100% 100%;
}

}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

背景をグラデーションにしたCSSボタン

ホバー時にアイコンが右に動きます

コードを表示

<a class="btn-gradient">
    <span>CSSボタン</span>
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1c-4.2-4.5-10.1-7.1-16.3-7.1C266 128 256 138 256 150.3V208H160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h96v57.7c0 12.3 10 22.3 22.3 22.3c6.2 0 12.1-2.6 16.3-7.1l99.9-107.1c3.5-3.8 5.5-8.7 5.5-13.8s-2-10.1-5.5-13.8L294.6 135.1z"></path>
    </svg>
</a>

.btn-gradient {
    position: relative;
    cursor: pointer;
    width: 12rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 2rem;
    background-image: linear-gradient(135deg, #5EFCE8 10%, #736EFE 100%);
    box-shadow: 0 0 15px #bbb;
    color: white;
    text-decoration: none;
    text-align: center;
}

.btn-gradient svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    transition: 0.5s;
    fill: #fff;
}

.btn-gradient:hover svg {
    right: 0.8rem;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時グラデーションが変化するCSSボタン

ホバー時にグラデーションが左に流れます

コードを表示

<a class="btn-gradient pic-icon">
    CSSボタン
</a>

.btn-gradient {
    cursor: pointer;
    padding: 1rem 3.5rem;
    border-radius: 2rem;
    outline: 2px solid white;
    outline-offset: -0.4rem;
    background-image: linear-gradient(to right, #3CD500 2%, #FFF720 100%);
    background-size: 150% auto;
    box-shadow: 0 0 15px #bbb;
    color: white;
    text-decoration: none;
    transition: 0.5s;
}

.btn-gradient:hover {
    background-position: right center;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にグラデーションの影が表示されるCSSボタン

ホバー時に「opacity」と「filter: blur」を指定しボタン下部に影を表示しています。

コードを表示

<a class="btn-gradient">
    <span>CSSボタン</span>
</a>

:root {
    --gradient: linear-gradient(90deg, #36daf7 10%, #ed36f7 90%);
}

.btn-gradient {
    position: relative;
    cursor: pointer;
    width: 12rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 2rem;
    background-image: var(--gradient);
    color: white;
    text-decoration: none;
    text-align: center;
    z-index: 0;
}

.btn-gradient::before {
    position: absolute;
    inset: 0;
    background-image: var(--gradient);
    transform: translate3d(0px, 15px, 0) scale(0.8);
    opacity: 0;
    transition: all 0.3s;
    content: "";
    z-index: -1;
}

.btn-gradient:hover::before {
    opacity: 0.7;
    filter: blur(20px);
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時グラデーションが変化するCSSボタン

「linear-gradient」を2つ指定し、カラーグラデーションの上に黒くしたグラデーションを重ね、ホバー時に「background-position」が変化するアニメーションを指定してます。

コードを表示

<a href="#!" class="btn-gradient pic-icon">
    CSSボタン
</a>

.btn-gradient {
    cursor: pointer;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-image:
        linear-gradient(#212121 0 100%),
        linear-gradient(90deg, #3fe8ff 0%, #ffd944 49%, #ff5151 80%, #3fe8ff 100%);
    background-repeat: no-repeat, repeat;
    background-size: 100% calc(100% - 5px), 100%;
    background-position: center;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.btn-gradient:hover {
    animation: flow 1.5s linear infinite;
}

@keyframes flow {
    to {
        background-position: center, 200px;
    }

}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にキラッと光るCSSボタン

linear-gradientで透過グラデーションを作り、ホバー時に「left」位置を変えてます

コードを表示

<a class="btn">
    CSSボタン
</a>

.btn {
    position: relative;
    padding: 1rem 3rem;
    border-radius: 10px;
    background-color: #296fa0;
    transition: .3s;
    color: #fff;
    font-weight: bold;
    overflow: hidden;
}

.btn::before {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
    transition: .5s;
    content: '';
}

.btn:hover::before {
    animation: flash .75s;
}

@keyframes flash {
    100% {
        left: 120%;
    }

}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にグラデーションをぼかしたCSSボタン

ホバー時「filter:blur」でグラデーションをぼかし、クリック時に元に戻しています。

コードを表示

<a class="btn">
    CSSボタン
</a>

.btn {
    position: relative;
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    background-color: #fff;
    transition: .3s;
    color: #353535;
    font-weight: bold;
}

.btn::before {
    position: absolute;
    inset: -2px;
    margin: auto;
    border-radius: 10px;
    background-image: linear-gradient(45deg, #f336f7 10%, #f7d836 90%);
    transition: .3s;
    z-index: -1;
    content: '';
}

.btn:hover::before {
    inset: -5px;
    filter: blur(10px);
}

.btn:active::before {
    inset: -2px;
    filter: blur(0px);
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時、下側にグラデーションの影を入れたCSSボタン

ホバー時「bottom」を指定し要素下部のグラデーションを広げてます。

コードを表示

<a class="btn">
    CSSボタン
</a>

.btn {
    position: relative;
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    background-color: #fff;
    transition: .3s;
    color: #353535;
    font-weight: bold;
}

.btn::before {
    position: absolute;
    inset: -2px;
    margin: auto;
    border-radius: 10px;
    background-image:
        linear-gradient(150deg, #36daf7 10%, #cb36f7 90%);
    transition: .3s;
    z-index: -1;
    content: '';
}

.btn:hover::before {
    bottom: -10px;
}

.btn:active::before {
    bottom: -8px;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にグラデーションが変化する流体シェイプ風CSSボタン

「border-radius」「background-position」を変化させたアニメーションを実行してます

コードを表示

<a class="btn">
    CSSボタン
</a>

.btn {
    position: relative;
    cursor: pointer;
    padding: 2rem 3rem;
    border-radius: 50px;
    background-image: linear-gradient(135deg, #52E5E7 10%, #130CB7 100%);
    background-size: 200%;
    transition: .3s;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 0 0 #369BEC;
    transition: .8s;
}

.btn:hover {
    padding: 3rem 4rem;
    animation: fluidshape 10s ease .1s infinite;
}

@keyframes fluidshape {
    0% {
        border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
        background-position: -180%;
    }

25% {
    border-radius: 38% 58% 52% 44%/47% 58% 38% 49%;
    background-position: -150%;
}

50% {
    border-radius: 59% 37% 53% 43%/59% 36% 60% 37%;
    background-position: -100%;
}

75% {
    border-radius: 48% 48% 32% 64%/54% 66% 30% 42%;
    background-position: -150%;
}

100% {
    border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
    background-position: -180%;
}

}