想写一个Button但是不会CSS和动画效果?这期水货干货满满不知道什么是Button?

这是Button

这也算Buttonimage-20200824205205073

这边就拿我的个人主页的↗ Go Blog为例子

首先我们在本地创建一个HTML和CSS

类似这样image-20200824205941692

然后我们右键HTML

打开后按照你写一个页面的格式

写一个简单的空壳页面

我这边是这样写的:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<!-- Start --!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./bt.css">
</head>
<body>
<p>I'm Body</p>
</body>
</html>

写完后我们首先在Body部分写一个自定义样式的超链接

1
<a class="btn" href="https://blog.slqwq.cn" target="_blank" rel="external nofollow noopener noreferrer" one-link-mark="yes"><span>&nbsp;&nbsp;&nbsp;Go Blog &nbsp;&nbsp;</span></a>

然后我们打开css

在里面写入:

1
2
3
 #btns
.btn {
}

这样一个基本CSS框架就好了

然后我们就可以开始写CSS部分了

先写入

1
padding: 0;

使填充为0

再写入

1
font-size: 100%;

使字体尺码为100%

然后写入

1
position: relative;

生成相对定位的元素,相对于其正常位置进行定位。

接着写入

1
z-index: 1;

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

之后写入

1
align-items: center;

定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式

最后写入

1
border-radius: 50%;

给div元素添加方形的边框

这时候显示出来还是这种状态

image-20200824211520197

然后咱们再写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
border: 4px solid hsla(0,0%,100%,.7);
0,0,0,.08), 0 3px 8px rgba(0,0,0,.06): ;
border: none;
box-shadow: 0 14px 38px #2196f300, 0 3px 8px #2196f300;
background-color: #2196F3;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
margin: 0 30px;
width: 54px;
height: 54px;
min-width: 54px;
min-height: 54px;
border-radius: 0px;
line-height: 4.3rem;
font-size: 20px;
color: #eff;

定义背景颜色之类的

然后就成了这个亚子image-20200824212140436

这时候已经半成了

我们只需要再去掉下划线,调调大小之类的就行了,所以就写入

1
text-decoration:none;

image-20200824212559632

这就是去掉下划线后的样子,然后我们需要添加鼠标移动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.btn:hover {
background-color: #ff7242;
-webkit-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
-moz-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
-o-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
-ms-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

然后就可以达到鼠标移上去变色的效果

接着咋们在修改亿点地方

最终成品

image-20200824212841163

文章水完了,溜了溜了