最简单的css3按钮动画

SFwords

于 2018-02-06 16:11:36 发布

阅读量768

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： css3

本文链接：https://blog.csdn.net/SFwords/article/details/79271728

学习专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<style>
#box input {
display: block;
margin: 100px
auto 0px;
outline: none;
border: none;
height: 50px;
width: 100px;
color: #fff;
font-size: 1em;
background-color: 
#ff0099;
border-radius: 
5px;
box-shadow: 0px 0px 5px
 2px 
#ec7cb4;
transform: scale(1);
transition-duration: 
0.3s
}

#box input:active {
transform: scale(0.9);
transition-duration: 
0.3s
}
</style>
</head>

<body>
<div id="box">
<input type="button"
value="click me!">
</div>
</body>

</html>