Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html,body {
height:80%;
background:#C1EBFF;
}
body {
text-align:center;
}
body:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
button {
background:#1AAB8A;
color:#fff;
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover {
background:#fff;
color:#1AAB8A;
}
button:before,button:after {
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background:#1AAB8A;
transition:400ms ease all;
}
button:after {
right:inherit;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css鼠标滑过按钮边框线动画

更新时间:2019-08-21 09:36:25

0