glowing buttons

Notes

.container a::after {
    
    position: absolute;         /* ⭐️ 使用絕對位置 */
    inset: 0;                   /* ⭐️ 覆蓋整個 <a> */

    content: '';                /* ⭐️ 沒有內容，背景色會不見❗️ */
    background: linear-gradient(45deg, rgb(130, 204, 253), rgb(2, 2, 128), #003, rgb(255, 100, 95));
    transition: 0.5s;           /*  */
}

.container a:hover::after {
    
    /* ⭐️ glow effect */
    inset: -3px;
    filter: blur(10px);
}

• 使用 ::after 來製造 <a> 元素「背光」的效果。

• 利用 background: linear-gradient 製作「彩色的幻燈」效果。

• 利用 transition 產稱「動畫」效果。

• 利用 :hover 與 inset: -3px, filter: blur() 製造「溢光」效果。

Code

codepen

YouTube

CSS

/* CSS reset */
:root {
    box-sizing: border-box;

    --color-main: #0e1538;
}

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

/* body */
body {

    /* flex */
    display: flex;
    justify-content: center;    /* ⭐️ 水平置中 */
    align-items: center;        /* ⭐️ 垂直置中 */
    min-height: 100vh;          /* ⭐️ 強迫使用全部高度 */

    background-color: var(--color-main);
}

/* container */
.container {
    /* flex */
    display: flex;
    justify-content: center;    /* ⭐️ 水平置中 */
    align-items: center;        /* ⭐️ 垂直置中 */
    flex-direction: column;
}

/* button */
.container a {

    width: 160px;
    height: 60px;

    position: relative;

    /* border: 1px solid white; */
    background-color: white;
    margin: 20px;
}

/* 按鈕背光 */
.container a::before,
.container a::after {
    
    position: absolute;         /* ⭐️ 使用絕對位置 */
    inset: 0;                   /* ⭐️ 覆蓋整個 <a> */

    content: '';                /* ⭐️ 沒有內容，背景色會不見❗️ */
    background: linear-gradient(45deg, rgb(130, 204, 253), rgb(2, 2, 128), #003, rgb(255, 100, 95));
    transition: 0.5s;           /*  */
}

.container a:nth-child(2)::before,
.container a:nth-child(2):after {

    background: linear-gradient(45deg, rgb(130, 204, 253), rgb(2, 2, 128), #003, rgb(122, 255, 95));

}

.container a:hover::before {
    inset: -3px;
}

.container a:hover::after {
    
    /* ⭐️ glow effect */
    inset: -3px;
    filter: blur(10px);
}

.container a span {

    /* ⭐️ center text node */
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    inset: 1px;
    z-index: 1;

    background-color: var(--color-main);
    color: white;
    text-transform: uppercase;

    /* ⭐️ 隱藏「按鈕面板亮面」突出的地方 */
    overflow: hidden;
}

/* 按鈕面板亮面 */
.container a span::before {

    content: '';

    /* ⭐️ 向左突出 50% 的寬度 */
    position: absolute;
    inset: 0 50% 0 -50%;

    background-color: rgba(255, 255, 255, 0.05);
    
    /* ⭐️ 讓長方形向左傾斜 25 度 */
    transform: skew(25deg);
}

HTML

<div class="container">
  <a href="#"><span>button</span></a>
  <a href="#"><span>button</span></a>
</div>