css如何实现button按钮的点击效果

lewis 6年前 (2019-03-17) 阅读数 7 #程序编程

文章标签 css

css实现button按钮点击效果的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用button标签设计一个按钮；4、添加script标签并写入css样式代码来实现按钮点击效果；5、通过浏览器方式查看设计效果。

具体操作方法：

1.首先创建一个html文件。

2.在html文件中添加html代码架构。

<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>按钮点击效果</title>
</head>
<body>
</body>
</html>

3.然后在html代码架构中的body标签里面使用button标签设计一个按钮。

<buttonclass="primary-btn">主要按钮</button>

4.在html架构中的html标签里面添加style标签并写入css样式代码来实现按钮点击效果。

<style>.primary-btn{
font-size:14px;
color:#fff;
height:44px;
padding:015px;
background-color:#07c160;
border:1pxsolid#07c160;
line-height:1.2;
text-align:center;
border-radius:2px;
cursor:pointer;
transition:opacity0.2s;
outline:none;
position:relative;
}
.primary-btn::before{
position:absolute;
top:50%;
left:50%;
width:100%;
height:100%;
background-color:#000;
border:inherit;
border-color:#000;
border-radius:inherit;
transform:translate(-50%,-50%);
opacity:0;
content:'';
}
.primary-btn:active::before{
opacity:0.1;
}
</style>

5.最后可通过浏览器方式阅读html文件查看设计效果。

完整示例代码如下：

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8">
<title>按钮点击效果</title>
<style>
.primary-btn{
font-size:14px;
color:#fff;
height:44px;
padding:015px;
background-color:#07c160;
border:1pxsolid#07c160;
line-height:1.2;
text-align:center;
border-radius:2px;
cursor:pointer;
transition:opacity0.2s;
outline:none;
position:relative;
}
.primary-btn::before{
position:absolute;
top:50%;
left:50%;
width:100%;
height:100%;
background-color:#000;
border:inherit;
border-color:#000;
border-radius:inherit;
transform:translate(-50%,-50%);
opacity:0;
content:'';
}
.primary-btn:active::before{
opacity:0.1;
}
</style>
</head>
<body>
<buttonclass="primary-btn">主要按钮</button>
</body>
</html>

版权声明

本文仅代表作者观点，不代表米安网络立场。

上一篇：ChatGPT新玩法下一篇：vuex数据持久化怎么实现

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

css如何实现button按钮的点击效果

版权声明

作者文章