前端网页按钮效果的展示

最新推荐文章于 2024-05-09 13:39:43 发布

小六子666666

最新推荐文章于 2024-05-09 13:39:43 发布

阅读量2.1k

点赞数

分类专栏：前端知识文章标签：按钮特效按钮的效果

本文链接：https://blog.csdn.net/qq_40862118/article/details/85777856

版权

前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端按钮的效果显示

下边这个是鼠标经过按钮时背景缓慢变换的效果

原始效果：

中间变换的效果在这里就不给大家展示了啊，自己尝试尝试就好哇~

完成的效果：

话不多说了，直接来代码：


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>按钮渐变</title>
	<style>
		 input,*:before, *:after {
		  -webkit-transition: all 1s ease 0s;
		  -ms-transition: all 1s ease 0s;
		  transition: all 1s ease 0s; 
		} /*变换的时间*/
		
		.input-box {
		  width: 100%;
		  padding: 0 10px;
		  margin-bottom: 20px;
		  float: left;
		  display: block; 
		}
		
		.input-box input[type="submit"] {
		    display: block;
		    border: 1px solid rgba(74, 74, 74, 0.15);
		    color: #000;  /*按钮上文字的颜色*/
		    background-color: transparent;
		    height: 40px;
		    line-height: 24px;
		    font-weight: 500;
		    letter-spacing: 1px;
		    padding: 7px 45px;
		    text-transform: uppercase; 
		}
		
		.input-box input[type="submit"]:hover {
		     background-color: #71b100;
		     border-color: #71b100;
		     color: #fff; 
		}
		
		.submit-box {
		  width: auto;
		  margin-bottom: 0;
		}
		
		.input-box {
		  width: 50%; 
		}
		
		@media only screen and (max-width: 479px) {
		 .input-box {
		     width: 100%; 
		 } 
		}
	</style>
</head>	
<body>
 <div class="input-box submit-box"><input type="submit" value="submit"></div>
</body>
</html>

小六子666666

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端网页按钮效果的展示

前端按钮的效果显示下边这个是鼠标经过按钮时背景缓慢变换的效果原始效果：中间变换的效果在这里就不给大家展示了啊，自己尝试尝试就好哇~完成的效果：话不多说了，直接来代码：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;按钮渐变&lt;/title&amp
复制链接

扫一扫