CSS3 的按钮怎么快速实现样式

html-css09

CSS3 的按钮怎么快速实现样式,第1张

HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个按钮CSS样式以下是该css3点击按钮特效的通用CSS样式：插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：上面的CSS代码可以生成如下图的动画效果：在“Stana”效果中，使用了html5SVGclipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。在“Stoja”效果中使用了CSSclip-path属性，这个效果也需要浏览器的支持才能看得到的。

<!DOCTYPE html>

<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>