Colorful Glowing

本次要實作的是如何使用 CSS 做出滑鼠移到按鈕上時出現的七彩動畫按鈕

Demo

元素建置

<!-- html -->

    <div class="center">
        <div class="outer button">
            <button>Hover Me</button>
        </div>
    </div>

<!-- css -->

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.center{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.button{
    height: 70px;
    width: 220px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer{
    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
    position: relative;
}

.outer button{
    background: #111;
    color: #f2f2f2;
    outline: none;
    border: none;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    height: 60px;
    width: 210px;
    border-radius: 50px;
}

首先創建出基本的 html 元素，並設定 CSS ，為了達成想要的效果，使用了一個 div 標籤，包覆一個 button 按鈕。

模糊特效

<!-- html -->

    <div class="center">
        <div class="outer button">
            <button>Hover Me</button>
            <span></span>
            <span></span>
        </div>
    </div>

<!-- css -->

.outer button{
    z-index: 1;
}

.outer span{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
    border-radius: 50px;
}

.outer span:nth-child(1){
    filter: blur(7px);
}

.outer span:nth-child(2){
    filter: blur(14px);
}

模糊效果的部分，我們分別建立了兩個 span 標籤，並使用 filter: blur 的方法設定兩個的模糊程度，因為 filter 屬性會將區塊內的背景統一加入特效，因此我們要將按鈕的文字移至區塊的最上層， 設定 z-index: 1，

動畫效果

.outer{
    animation: rotate 1.5s linear infinite;
}

@keyframes rotate{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}

在按鈕的背景元素加上動畫，設定關鍵影格，在每個影格更改 filter: hue-rotate 調轉色調。

Hover 效果

.outer:hover {
    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
    animation: rotate 1.5s linear infinite;
    position: relative;
}

.outer:hover span{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
    border-radius: 50px;
}

.outer:hover  span:nth-child(1){
    filter: blur(7px);
}

.outer:hover  span:nth-child(2){
    filter: blur(14px);
}

最後就是幫一些類別加上 hover 達成滑鼠移入才會產生效果。