22 闪烁按钮

效果演示

实现了一个按钮的样式，包括背景颜色、边框、圆角、点击效果等。当鼠标悬停在按钮上时，按钮的背景颜色和文字颜色会发生变化，同时按钮会出现闪烁的效果。

Code

<button class="btn">
    <svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="sparkle">
        <path
            d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z">
        </path>
    </svg>

    <span class="text">Generate</span>
</button>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.btn {
    border: none;
    width: 15em;
    height: 5em;
    border-radius: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #1C1A1C;
    cursor: pointer;
    transition: all 450ms ease-in-out;
}

.sparkle {
    fill: #AAAAAA;
    transition: all 800ms ease;
}

.text {
    font-weight: 600;
    color: #AAAAAA;
    font-size: medium;
}

.btn:hover {
    background: linear-gradient(0deg, #A47CF3, #683FEA);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
        inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
        0px 0px 0px 4px rgba(255, 255, 255, 0.2),
        0px 0px 180px 0px #9917FF;
    transform: translateY(-2px);
}

.btn:hover .text {
    color: white;
}

.btn:hover .sparkle {
    fill: white;
    transform: scale(1.2);
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平居中对齐 */
  align-items: center; /* 设置flex容器中内容的垂直居中对齐 */
  background-color: #e8e8e8; /* 设置body元素的背景颜色 */
}

这段代码设置了整个页面的样式，包括高度、布局、背景颜色等。

.btn {
  border: none; /* 设置按钮没有边框 */
  width: 15em; /* 设置按钮宽度为15em */
  height: 5em; /* 设置按钮高度为5em */
  border-radius: 3em; /* 设置按钮圆角半径为3em */
  display: flex; /* 设置按钮为flex布局 */
  justify-content: center; /* 设置按钮内部内容的水平居中对齐 */
  align-items: center; /* 设置按钮内部内容的垂直居中对齐 */
  gap: 12px; /* 设置按钮内部内容之间的间距为12px */
  background: #1C1A1C; /* 设置按钮的背景颜色为#1C1A1C */
  cursor: pointer; /* 设置鼠标指针为指针 */
  transition: all 450ms ease-in-out; /* 设置按钮的过渡效果 */
}

这段代码设置了按钮的样式，包括边框、宽度、高度、圆角、内部内容的对齐方式、背景颜色、鼠标指针、过渡效果等。

.sparkle {
  fill: #AAAAAA; /* 设置闪光点的颜色为#AAAAAA */
  transition: all 800ms ease; /* 设置闪光点的过渡效果 */
}

这段代码设置了按钮内部的闪光点的样式，包括颜色和过渡效果。

.text {
  font-weight: 600; /* 设置按钮内部文字的粗细为600 */
  color: #AAAAAA; /* 设置按钮内部文字的颜色为#AAAAAA */
  font-size: medium; /* 设置按钮内部文字的字体大小为中等 */
}

这段代码设置了按钮内部文字的样式，包括粗细、颜色和字体大小。

.btn:hover {
  background: linear-gradient(0deg, #A47CF3, #683FEA); /* 设置按钮在鼠标悬停时的背景颜色为渐变色 */
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), /* 设置按钮在鼠标悬停时的阴影效果 */
    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 4px rgba(255, 255, 255, 0.2),
    0px 0px 180px 0px #9917FF;
  transform: translateY(-2px); /* 设置按钮在鼠标悬停时的垂直平移 */
}

这段代码设置了按钮在鼠标悬停时的样式，包括背景颜色、阴影效果和垂直平移等。

.btn:hover.text {
  color: white; /* 设置按钮在鼠标悬停时内部文字的颜色为白色 */
}

这段代码设置了按钮在鼠标悬停时内部文字的样式，包括颜色。

.btn:hover.sparkle {
  fill: white; /* 设置按钮在鼠标悬停时闪光点的颜色为白色 */
  transform: scale(1.2); /* 设置按钮在鼠标悬停时闪光点的放大效果 */
}

这段代码设置了按钮在鼠标悬停时闪光点的样式，包括颜色和放大效果。