---
title: CSS · 新拟态玻璃按钮和优雅的文字描边
created: 2023-01-29
summary: Glass buttons and elegant text stroke
tags:
- CSS Trick
---
## 1.玻璃按钮
### 来源
[Fediverse Fetch Analyzer](https://midnight-productive-sunset.glitch.me/l/organic-interest)
### 效果
### 思路
- 用三种不同的阴影效果来创造层次感
- 用 box-shadow 实现,其中
- 阴影 1: `4px 4px 8px #afb8bd` 为右下 ↘ 暗面阴影颜色
- 阴影 2: `-4px -4px 8px #edf8ff` 为左上 ↖ 亮面外边缘颜色
- 阴影 3: `inset 2px 2px rgba(0, 0, 0, 0.1)` 为内部阴影,用于营造玻璃透明感
- 鼠标悬浮(hover)在按钮上时,按钮颜色变浅
- 按钮阴影色应和背景是同一色系
### 代码
```css title='css'
button {
/* reset */
all: unset;
padding: 10px;
font-size: 1rem;
border-radius: 50px;
/* hsl(hue saturation lightness / alpha) */
background: hsl(260, 25%, 84%);
cursor: pointer;
box-shadow: 4px 4px 8px #afb8bd, -4px -4px 8px #edf8ff, inset 2px 2px rgba(0, 0, 0, 0.1);
}
button:hover {
background: hsl(260, 25%, 90%);
}
html {
background: #ced8de;
}
```
```html title='html'
```
CodePen:[neumorphism-button](https://codepen.io/sevichee/pen/eYjzpVp)
## 2. 优雅文字描边
### 来源
[Typescript cheatsheet](https://devhints.io/typescript)
### 效果
Elegant-text-shadow
### 思路
- 用两个多重投影重合后未覆盖的部分作为灰色描边。
- 用 text-shadow 来做,当有两个 text-shadow 的时候,可以做多重投影
- `text-shadow:水平阴影,垂直阴影,模糊距离,阴影颜色`
- 从上到下的投影:
- 上 `2px 2px 0 #fff` 白色 (和文字背景颜色一样)
- 下 `3px 3px 0 #ddd` 灰色
- 两个投影偏移的距离越大,描边越粗。不过我感觉,1px 的差距比较像描边。
### 代码
```css title='css'
p {
font-family: serif;
font-style: italic;
font-size: 4rem;
text-shadow: 2px 2px 0 #fff, 3px 3px 0 #ddd;
}
```
```html title='html'
Elegant-text-shadow
```
CodePen:[elegant-text-stroke](https://codepen.io/sevichee/pen/OJwwgry)