css怎么实现提交按钮

PHP中文网 • 2025年3月11日 18:21:28 • 编程技术 • 阅读 2

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

本教程操作环境：Windows10系统、CSS3版、DELL G3电脑

css怎么实现提交按钮？

纯CSS实现几个好看的按钮

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

登录后复制

我们可以使用 :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;}

登录后复制

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}

登录后复制

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);}

登录后复制