css如何实现提交按钮

本文小编为大家详细介绍“css如何实现提交按钮”，内容详细，步骤清晰，细节处理妥当，希望这篇“css如何实现提交按钮”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联公司是一家集网站建设,宝应企业网站建设,宝应品牌网站建设,网站定制,宝应网站建设报价,网络营销,网络优化,宝应网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

css实现提交按钮的方法：1、通过HTML 标签定义一个按钮；2、通过“:hover”选择器来修改鼠标悬停在按钮上的样式；3、使用“transition-duration”属性设置“hover”效果的速度即可。

1. 鼠标悬停

.button {
   background-color: #4CAF50; /* Green */
   border: none;
   color: white;
   padding: 16px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
}

.button1 {
   background-color: white;
   color: black;
   border: 2px solid #4CAF50;
}

.button1:hover {
   background-color: #4CAF50;
   color: white;
}

.button2 {
   background-color: white;
   color: black;
   border: 2px solid #008CBA;
}

.button2:hover {
   background-color: #008CBA;
   color: white;
}

Green
Blue

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式，使用 transition-duration 属性可以设置 "hover" 效果的速度。

2. 鼠标悬浮带阴影按钮

.button {
   background-color: #4CAF50; /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
}

.button1:hover {
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

鼠标悬停后出现阴影

添加阴影后，按钮显得更加立体

3. 鼠标悬停后按钮添加箭头图标

.button {
 display: inline-block;
 border-radius: 4px;
 background-color: #f4511e;
 border: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 28px;
 padding: 20px;
 width: 200px;
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;
 vertical-align:middle;
}

.button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;
}

.button span:after {
 content: '»';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;
}

.button:hover span {
 padding-right: 25px;
}

.button:hover span:after {
 opacity: 1;
 right: 0;
}

Hover 

4. 按钮点击的水波效果

.button {
   position: relative;
   background-color: #4CAF50;
   border: none;
   font-size: 28px;
   color: #FFFFFF;
   padding: 20px;
   width: 200px;
   text-align: center;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;
}

.button:after {
   content: "";
   background: #90EE90;
   display: block;
   position: absolute;
   padding-top: 300%;
   padding-left: 350%;
   margin-left: -20px!important;
   margin-top: -120%;
   opacity: 0;
   transition: all 0.8s
}

.button:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s
}

Click Me

5. 按钮点击“往下压”的效果

.button {
 display: inline-block;
 padding: 15px 25px;
 font-size: 24px;
 cursor: pointer;
 text-align: center;  
 text-decoration: none;
 outline: none;
 color: #fff;
 background-color: #4CAF50;
 border: none;
 border-radius: 15px;
 box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
 background-color: #3e8e41;
 box-shadow: 0 5px #666;
 transform: translateY(4px);
}

Click Me

读到这里，这篇“css如何实现提交按钮”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

名称栏目：css如何实现提交按钮
转载来源：http://cdxtjz.cn/article/joshjh.html