模板：

```css button { background: ; * normal color: #fff or linear-gradient() * text-decoration: ; } button:hover { } ```

​## 实例

​### 透明背景按钮

```html <button>Button</button> ```

```scss button { color: black; background: transparent; background-color: white; border: 2px solid #0099cc; border-radius: 10px; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; text-decoration: none; text-transform: uppercase; &:hover { color: white; background-color: #008cba; } } ```

[See the Pen](https://codepen.io/tianheg/pen/ZEvmLJO)

​### 在 CSS 中插入实体

```html <button><span>Button</span></button> ```

```scss $color: #ffffff; $background-color: #f4511e;

button { display: inline-block; border-radius: 4px; background-color: $background-color; border: none; color: $color; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; &:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } } &:hover { span { padding-right: 25px; &:after { opacity: 1; right: 0; } } } } ```

[See the Pen](https://codepen.io/tianheg/pen/yLpQgBB)

​### 点击动画

```html <button class="ripple">Click Me</button> ```

```scss $color: #fff; $font-family: 'Roboto', sans-serif; $background-color_{1}: #000; $background-color<sub>2</sub>: purple; $background-color<sub>3</sub>: #fff;

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'; @keyframes scale { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

box-sizing: border-box; } body { background-color: $background-color_{1}; font-family: $font-family; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } button { background-color: $background-color_{2}; color: $color; border: 1px purple solid; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; padding: 20px 30px; overflow: hidden; margin: 10px 0; position: relative; &:focus { outline: none; } .circle { position: absolute; background-color: $background-color<sub>3</sub>; width: 100px; height: 100px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: scale 0.5s ease-out; } } ```

```js const buttons = document.querySelectorAll('.ripple')

buttons.forEach((button) => { button.addEventListener('click', function (e) { const x = e.clientX const y = e.clientY

const buttonTop = e.target.offsetTop const buttonLeft = e.target.offsetLeft

const xInside = x - buttonLeft const yInside = y - buttonTop

const circle = document.createElement('span') circle.classList.add('circle') circle.style.top = yInside + 'px' circle.style.left = xInside + 'px'

this.appendChild(circle)

setTimeout(() => circle.remove(), 500) }) }) ```

[See the Pen](https://codepen.io/tianheg/pen/yLpQgPe)

​### 按钮插入背景图片（`background-image`）

​### 带有 icons 的按钮

```html <div class="main"> <button> <div class="icon-button twitter"> <i class="icon-twitter fa-brands fa-twitter"></i> <span> <i class="fa-brands fa-twitter"></i></span> </div> </button> </div> <!– used https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css –> ```

```scss $color_{1}: #1565c0; $color<sub>2</sub>: white; $color_{3}: #4099ff; $background-color<sub>1</sub>: white; $background-color<sub>2</sub>: #4099ff;

button { border: none; border-radius: 50px; background: transparent; } .icon-button { border-radius: 3rem; cursor: pointer; display: inline-block; font-size: 2rem; height: 3.6rem; / line-height: 3.6rem; margin: 0 5px; position: relative; width: 3.6rem; span { border-radius: 0; / display: block; height: 0; // left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; width: 0; } &:hover { span { width: 3.6rem; height: 3.6rem; border-radius: 3.6rem; margin: -1.8rem; } .icon-twitter { color: $color_{2}; } } i { background: none; color: $color<sub>2</sub>; height: 3.6rem; left: 0; line-height: 3.6rem; position: absolute; top: 0; width: 3.6rem; z-index: 10; } .icon-twitter { color: $color<sub>3</sub>; } }

.twitter { span { background-color: $background-color<sub>2</sub>; } } ```

[See the Pen](https://codepen.io/tianheg/pen/MWrzJxJ)

​## 按钮相关工具

• https://www.cssportal.com/css3-button-generator/
• https://css3buttongenerator.com/index.html

参考资料

1. [CSS Button Tutorial – How to Styling HTML Buttons with CSS](https://www.freecodecamp.org/news/a-quick-guide-to-styling-buttons-using-css-f64d4f96337f/)