纯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;} <button class="button button1">Green</button><button class="button button2">Blue</button>

文章插图

我们可以使用 :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;-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);}<button class="button button1">鼠标悬停后出现阴影</button>

文章插图

添加阴影后，按钮显得更加立体。
鼠标悬停后按钮添加箭头图标【纯CSS实现几个好看的按钮】

.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;}<button class="button"><span>Hover </span></button>

文章插图

按钮点击的水波效果

.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}<button class="button">Click Me</button>

文章插图
这个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);}<button class="button">Click Me</button>