CSS 设置按钮样式
模板：
1button {
2 background: ; /* normal color: #fff or linear-gradient() */
3 text-decoration: ;
4}
5button:hover {
6}实例
透明背景按钮
1<button>Button</button> 1button {
2 color: black;
3 background: transparent;
4 background-color: white;
5 border: 2px solid #0099cc;
6 border-radius: 10px;
7 padding: 16px 32px;
8 text-align: center;
9 font-size: 16px;
10 margin: 4px 2px;
11 transition-duration: 0.4s;
12 cursor: pointer;
13 text-decoration: none;
14 text-transform: uppercase;
15 &:hover {
16 color: white;
17 background-color: #008cba;
18 }
19}在 CSS 中插入实体
1<button><span>Button</span></button> 1$color: #ffffff;
2$background-color: #f4511e;
3
4button {
5 display: inline-block;
6 border-radius: 4px;
7 background-color: $background-color;
8 border: none;
9 color: $color;
10 text-align: center;
11 font-size: 28px;
12 padding: 20px;
13 width: 200px;
14 transition: all 0.5s;
15 cursor: pointer;
16 margin: 5px;
17 span {
18 cursor: pointer;
19 display: inline-block;
20 position: relative;
21 transition: 0.5s;
22 &:after {
23 content: '\00bb';
24 position: absolute;
25 opacity: 0;
26 top: 0;
27 right: -20px;
28 transition: 0.5s;
29 }
30 }
31 &:hover {
32 span {
33 padding-right: 25px;
34 &:after {
35 opacity: 1;
36 right: 0;
37 }
38 }
39 }
40}点击动画
1<button class="ripple">Click Me</button> 1$color: #fff;
2$font-family: 'Roboto', sans-serif;
3$background-color_1: #000;
4$background-color_2: purple;
5$background-color_3: #fff;
6
7@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap';
8@keyframes scale {
9 to {
10 transform: translate(-50%, -50%) scale(3);
11 opacity: 0;
12 }
13}
14* {
15 box-sizing: border-box;
16}
17body {
18 background-color: $background-color_1;
19 font-family: $font-family;
20 display: flex;
21 flex-direction: column;
22 align-items: center;
23 justify-content: center;
24 height: 100vh;
25 overflow: hidden;
26 margin: 0;
27}
28button {
29 background-color: $background-color_2;
30 color: $color;
31 border: 1px purple solid;
32 font-size: 14px;
33 text-transform: uppercase;
34 letter-spacing: 2px;
35 padding: 20px 30px;
36 overflow: hidden;
37 margin: 10px 0;
38 position: relative;
39 &:focus {
40 outline: none;
41 }
42 .circle {
43 position: absolute;
44 background-color: $background-color_3;
45 width: 100px;
46 height: 100px;
47 border-radius: 50%;
48 transform: translate(-50%, -50%) scale(0);
49 animation: scale 0.5s ease-out;
50 }
51} 1const buttons = document.querySelectorAll('.ripple')
2
3buttons.forEach((button) => {
4 button.addEventListener('click', function (e) {
5 const x = e.clientX
6 const y = e.clientY
7
8 const buttonTop = e.target.offsetTop
9 const buttonLeft = e.target.offsetLeft
10
11 const xInside = x - buttonLeft
12 const yInside = y - buttonTop
13
14 const circle = document.createElement('span')
15 circle.classList.add('circle')
16 circle.style.top = yInside + 'px'
17 circle.style.left = xInside + 'px'
18
19 this.appendChild(circle)
20
21 setTimeout(() => circle.remove(), 500)
22 })
23})按钮插入背景图片（ background-image ）
带有 icons 的按钮
1<div class="main">
2 <button>
3 <div class="icon-button twitter">
4 <i class="icon-twitter fa-brands fa-twitter"></i>
5 <span> <i class="fa-brands fa-twitter"></i></span>
6 </div>
7 </button>
8</div>
9<!-- used https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css --> 1$color_1: #1565c0;
2$color_2: white;
3$color_3: #4099ff;
4$background-color_1: white;
5$background-color_2: #4099ff;
6
7button {
8 border: none;
9 border-radius: 50px;
10 background: transparent;
11}
12.icon-button {
13 border-radius: 3rem;
14 cursor: pointer;
15 display: inline-block;
16 font-size: 2rem;
17 height: 3.6rem;
18 // line-height: 3.6rem;
19 margin: 0 5px;
20 position: relative;
21 width: 3.6rem;
22 span {
23 border-radius: 0;
24 // display: block;
25 height: 0;
26 // left: 50%;
27 margin: 0;
28 position: absolute;
29 top: 50%;
30 transition: all 0.3s;
31 width: 0;
32 }
33 &:hover {
34 span {
35 width: 3.6rem;
36 height: 3.6rem;
37 border-radius: 3.6rem;
38 margin: -1.8rem;
39 }
40 .icon-twitter {
41 color: $color_2;
42 }
43 }
44 i {
45 background: none;
46 color: $color_2;
47 height: 3.6rem;
48 left: 0;
49 line-height: 3.6rem;
50 position: absolute;
51 top: 0;
52 width: 3.6rem;
53 z-index: 10;
54 }
55 .icon-twitter {
56 color: $color_3;
57 }
58}
59
60.twitter {
61 span {
62 background-color: $background-color_2;
63 }
64}