按鈕的有趣特效

時間 2019-11-20

標籤按鈕有趣特效简体版

原文原文鏈接

1.上下滑動特效css

代碼結構：html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
width: 200px;
height: 30px;
margin: 30px auto;
background-color: #0000FF;
display: block;
outline: none;
border: none;
position: relative;
z-index: 1;
color: #fff;
}字體

.btns:before {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transform-origin: center bottom;
transform: scaleY(0);
background-color: red;
transition: transform 0.4s ease-in-out;
}3d

.btns:hover {
cursor: pointer;
}orm

.btns:hover:before {
transform: scaleY(1);
transform-origin: center top;
}
</style>
</head>
<body>
<button type="button" class="btns">上下滑動</button>
</body>
</html>htm

2.左右震動特效utf-8

代碼結構：ci

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
margin: 50px auto;
display: block;
position: relative;
z-index: 1;
background-color: #0000FF;
outline: none;
border: none;
width: 300px;
height: 40px;
color: #fff;
}animation

.btns:hover {
cursor: pointer;
animation: dong 0.4s;
}it

@keyframes dong {

0%,
100% {
transform: scale(1, 1);
}

25%,
75% {
transform: scale(0.95, 1.1);
}

50% {
transform: scale(1.1, 0.95);
}
}
</style>
</head>
<body>
<button type="button" class="btns">左右震動動效</button>
</body>
</html>

3.左右放大動效

代碼結構

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btns {
margin: 50px auto;
display: block;
position: relative;
z-index: 1;
background-color: #0000FF;
outline: none;
border: none;
width: 300px;
height: 40px;
color: #fff;
}

.btns:hover {
cursor: pointer;

}
.btns:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 4px solid #0000FF;
transform: scale(1);
transform-origin: center;
}
.btns:hover:before {
transition: all 0.4s ease-out;
border: 1px solid #0000FF;
transform: scale(1.1);
opacity: 0;
}
</style>
</head>
<body>
<button type="button" class="btns">左右放大動效</button>
</body>
</html>

4.傾斜的閃光特效

代碼特效：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>傾斜的閃光特效</title>
<style type="text/css">
.btns {
outline: none;
border: none;
z-index: 1;
position: relative;
color: white;
background: #262626;
padding: 0.5em 1em;
overflow: hidden;
/* --shine-width: 1.25em; */
margin:50px auto;
width:100px;
display:block;
}

.btns:after {
content: "";
z-index: -1;
position: absolute;
background: red;
top: -100%;
height:20px;
left: 0%;
bottom: -50%;
width:100px;
transform: translate3d(-200%, 0, 0) rotate(125deg);
/* */
}

.btns:hover {
cursor: pointer;
}

.btns:hover:after {
transition: transform 0.8s ease-in-out;
transform: translate3d(100%, 236%, 0) rotate(125deg);
}
</style>
</head>
<body>
<button type="button" class="btns">閃光特效</button>
</body>
</html>

5.氣泡特效

代碼結構：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
outline: none;
border: none;
cursor: pointer;
color: white;
position: relative;
width: 100px;
display: block;
margin: 50px auto;
padding: 0.5em 1em;
background-color: #40a9ff;
z-index: 1;
overflow: hidden;
}

.btns:before {
z-index: -1;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
border-radius: 50%;
background-color:red;
transform-origin: center;
transform: translate3d(-50%, -50%, 0) scale(0, 0);
transition: transform 0.4s ease-in-out;
}.btns:hover:before {

transform: translate3d(-50%, -50%, 0) scale(10,10);
}
</style>
</head>
<body>
<button type="button" class="btns">氣泡特效</button>



</body>
</html>

6.左右滑動特效

代碼結構：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左右滑動特效</title>
<style type="text/css">
.btns {
outline: none;
border: none;
cursor: pointer;
color: white;
position: relative;
width: 100px;
display: block;
margin: 50px auto;
padding: 0.5em 1em;
background-color: #40a9ff;
z-index: 1;
overflow: hidden;
}

button::before {
z-index: -1;
content: "";
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #9254de;
top: 0;
left: 0;
transform-origin: center;
transform: scale3d(0, 0, 0);
transition: transform 0.45s ease-in-out;
}
button:hover::before {
transform: scale3d(20,20, 20);
}
</style>
</head>
<body>
<button type="button" class="btns">氣泡特效</button>

</body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。