前端纯CSS特效丨打造酷炫微软风按钮特效
> 特效展示
**一、整体布局与基础样式**
1. 首先，通过设置 `.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;` 分别定义了边框、轮廓和阴影效果，增强了按钮的立体感。
2. 对于微软标志部分 `.ms-logo`，使用 `display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;` 创建了一个 2x2 的网格布局，四个小方块分别占据一个网格单元，实现了微软标志的基本形状。宽度和高度的设置以及 `flex-shrink: 0;` 确保标志在按钮中的尺寸固定且不会被压缩。
3. 按钮文字部分 `.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>
```
**二、伪元素实现动态效果**
1. `.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，使其在初始状态下不可见。
2. 当鼠标悬停在按钮上时，`.brutalist-button:hover::before` 的样式生效。
* `opacity: 1;` 使伪元素变为可见状态。
* `animation: slide 2s infinite;` 触发名为 `slide` 的动画，该动画在 2 秒内无限循环，实现了伪元素从左至右的滑动效果。动画定义在 `@keyframes slide` 中，通过 `0% { left: -100%; }` 和 `100% { left: 100%; }` 确定了伪元素在动画开始和结束时的位置。
**三、交互效果**
1. 鼠标悬停效果：
* `.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`，进一步增强了整体的交互感。
2. 鼠标点击效果：
* `.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>
```
页:
[1]