<html>
<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 type="text/css">
/*给两个input设置共同样式*/
input{
display: block
width: 100px
height: 60px
border-radius: 30px
font-weight: 900
font-size: 20px
}
/*单独设置不同的样式,这里用的是交集选择器*/
input.btn1{
background-color: white
color: #00DABC
border: 3px solid #00DABC
}
input.btn2{
background-color: #00DABC
color: #fff
border: none
}
</style>
</head>
<body>
<!--两个input标签，分别写两个类名-->
<input type="button" name="" value="INFO" />
<br />
<input type="button" name="" value="INFO" />
</body>
</html>
HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个按钮CSS样式以下是该css3点击按钮特效的通用CSS样式：插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：上面的CSS代码可以生成如下图的动画效果：在“Stana”效果中，使用了html5SVGclipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。在“Stoja”效果中使用了CSSclip-path属性，这个效果也需要浏览器的支持才能看得到的。声明楼上的答复基本上是对的
但是，还是告诉你css3可以达成“处理click事件”类似的效果，比如checkbox，click后就能利用UI元素状态伪类来实现相应的变化，这种变化有点类似处理click事件，只是小范围的应用。
比如纯css3实现的checkbox按钮开关，你可以到mxria网站上看CSS3按钮开关的实现DEMO
css3在响应用户操作上很弱，基本上还是实现静态样式为主
