前端纯CSS特效丨打造酷炫微软风按钮特效

七夏（UID：1） · 发表于 2024-10-16 01:03:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

特效展示

一、整体布局与基础样式

首先，通过设置 .brutalist-button 的样式，确定了按钮的整体外观。
- display: flex; align-items: center; 使按钮内部的元素能够垂直居中对齐，确保布局的整齐性。
- width: 169px; height: 60px; background-color: #000; color: #fff; 定义了按钮的宽度、高度、背景颜色和文字颜色，为按钮奠定了基础的视觉风格。
- font-family: Arial, sans-serif; font-weight: bold; 设置了字体样式，使其更加醒目。
- border: 3px solid #fff; outline: 3px solid #000; box-shadow: 6px 6px 0 #00a4ef; 分别定义了边框、轮廓和阴影效果，增强了按钮的立体感。
对于微软标志部分 .ms-logo，使用 display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; 创建了一个 2x2 的网格布局，四个小方块分别占据一个网格单元，实现了微软标志的基本形状。宽度和高度的设置以及 flex-shrink: 0; 确保标志在按钮中的尺寸固定且不会被压缩。
按钮文字部分 .button-text 通过 display: flex; flex-direction: column; line-height: 1.2; 实现了垂直排列的文字布局，使上下两行文字能够清晰地展示在按钮上。

 <body>
  <button class="brutalist-button">
    <div class="ms-logo">
      <div class="ms-logo-square"></div>
      <div class="ms-logo-square"></div>
      <div class="ms-logo-square"></div>
      <div class="ms-logo-square"></div>
    </div>
    <div class="button-text">
      <span>Get it from</span>
      <span>Microsoft</span>
    </div>
  </button>

</body>

二、伪元素实现动态效果

.brutalist-button::before 是实现按钮动态效果的关键之一。
- 通过 position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 将伪元素定位在按钮的上方，并初始状态下将其向左移出按钮范围。
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); 设置了一个从左到右的线性渐变背景，初始时为透明，中间部分为半透明的白色，再到透明，为后续的动画效果提供了基础。
- z-index: 1; transition: none; opacity: 0; 设置了伪元素的层级和初始不透明度为 0，使其在初始状态下不可见。
当鼠标悬停在按钮上时，.brutalist-button:hover::before 的样式生效。

opacity: 1; 使伪元素变为可见状态。
animation: slide 2s infinite; 触发名为 slide 的动画，该动画在 2 秒内无限循环，实现了伪元素从左至右的滑动效果。动画定义在 @keyframes slide 中，通过 0% { left: -100%; } 和 100% { left: 100%; } 确定了伪元素在动画开始和结束时的位置。

三、交互效果

鼠标悬停效果：
- .brutalist-button:hover 定义了鼠标悬停在按钮上时的样式变化。
- transform: translate(-4px, -4px); 使按钮向上和向左移动 4 像素，营造出一种立体的悬浮感。
- box-shadow: 10px 10px 0 #000; 改变了阴影效果，使其更加深邃。
- .brutalist-button:hover.ms-logo 使微软标志旋转 -10deg 并放大 1.1 倍，增加了动态效果。
- .brutalist-button:hover.button-text 使按钮文字倾斜 -5deg，进一步增强了整体的交互感。
鼠标点击效果：

.brutalist-button:active 定义了按钮被点击时的样式。
transform: translate(4px, 4px); 使按钮向下和向右移动 4 像素，给出明确的点击反馈。
box-shadow: 0px 0px 0 #00a4ef; 去除了阴影效果。
background-color: #fff; color: #000; border-color: #000; 反转了按钮的颜色，使其与点击前形成鲜明对比。
.brutalist-button:active.ms-logo 使微软标志旋转 10deg 并缩小 0.9 倍。
.brutalist-button:active.button-text 使按钮文字倾斜 5deg。

 <style>
  .brutalist-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 169px;
    height: 60px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: bold;
    border: 3px solid #fff;
    outline: 3px solid #000;
    box-shadow: 6px 6px 0 #00a4ef;
    transition: all 0.1s ease-out;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  .brutalist-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent);
    z-index: 1;
    transition: none;
    /* Initially hide the pseudo-element */
    opacity: 0;
  }

  @keyframes slide {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }

  .brutalist-button:hover::before {
    /* Show the pseudo-element on hover */
    opacity: 1;
    animation: slide 2s infinite;
  }

  .brutalist-button:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 #000;
    background-color: #000;
    color: #fff;
  }

  @keyframes slide {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }

  .brutalist-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0 #00a4ef;
    background-color: #fff;
    color: #000;
    border-color: #000;
  }

  /* Rest of the CSS remains the same */

  .ms-logo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform 0.2s ease-out;
    position: relative;
    z-index: 1;
  }

  .brutalist-button:hover .ms-logo {
    transform: rotate(-10deg) scale(1.1);
  }

  .brutalist-button:active .ms-logo {
    transform: rotate(10deg) scale(0.9);
  }

  .ms-logo-square {
    width: 100%;
    height: 100%;
  }

  .ms-logo-square:nth-child(1) {
    background-color: #f25022;
  }

  .ms-logo-square:nth-child(2) {
    background-color: #7fba00;
  }

  .ms-logo-square:nth-child(3) {
    background-color: #00a4ef;
  }

  .ms-logo-square:nth-child(4) {
    background-color: #ffb900;
  }

  .button-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    transition: transform 0.2s ease-out;
    position: relative;
    z-index: 1;
  }

  .brutalist-button:hover .button-text {
    transform: skew(-5deg);
  }

  .brutalist-button:active .button-text {
    transform: skew(5deg);
  }

  .button-text span:first-child {
    font-size: 11px;
    text-transform: uppercase;
  }

  .button-text span:last-child {
    font-size: 16px;
    text-transform: uppercase;
  }
</style>

前端纯CSS特效丨打造酷炫微软风按钮特效

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

快速回帖

分享帝

龙年限定

关于楼主

商务推广