CSS放两个按钮，纯CSS实现⼏个好看的按钮
⿏标悬停效果
.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;} GreenBlue
我们可以使⽤ :hover 选择器来修改⿏标悬停在按钮上的样式，使⽤ transition-duration 属性可以设置 "hover" 效果的速度。
⿏标悬浮带阴影按钮
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -w
ebkit-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);}⿏标悬停后出现阴影
添加阴影后，按钮显得更加⽴体。
⿏标悬停后按钮添加箭头图标
.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
按钮点击的⽔波效果
.button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFF
F; 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
css鼠标点击样式
这个gif没做好
按钮点击“往下压”的效果
.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
欢迎⼤家多多关注～

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。