300字范文 > 5去掉button按钮的点击样式_各种好看的小按钮合集纯css编写最近在学习时遇到的

5去掉button按钮的点击样式_各种好看的小按钮合集纯css编写最近在学习时遇到的

时间：2019-03-10 12:24:00

写在前面

最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。

亮起来按钮

<div id="neon-btn"><button class="btn one">Hover me</button><button class="btn two">Hover me</button><button class="btn three">Hover me</button></div>#neon-btn {display: flex;align-items: center;justify-content: space-around;height: 100vh;background: #031628; }.btn {border: 1px solid;background-color: transparent;text-transform: uppercase;font-size: 14px;padding: 10px 20px;font-weight: 300;}.one {color: #4cc9f0;}.two {color: #f038ff; }.three {color: #b9e769;}.btn:hover {color: white;border: 0;}.one:hover {background-color: #4cc9f0;-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);}.two:hover {background-color: #f038ff;-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);}.three:hover {background-color: #b9e769;-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);}

简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个为例，找到那个按钮hover即当鼠标滑过时产生的样式。首先背景颜色改变成按钮颜色，字体变白色，边框0直接让其有充满整个按钮的感觉。之后就是设置其阴影，为了兼容不同浏览器的引擎，所以有不同的属性，但是不管哪个属性，都一样的属性值。属性值按照自己喜好调节，展现的效果就会是亮的程度以及范围。具体哪个值调整会有什么效果，直接看文档。

填充式的按钮

div id="loading-btn"><button><span>Hover</span></button></div><style type="text/css">#loading-btn {display: flex;align-items: center;justify-content: center;height: 100vh;}button {background: transparent;border: 0;border-radius: 0;text-transform: uppercase;font-weight: bold;font-size: 20px;padding: 15px 50px;position: relative;}button:before {transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);content: '';width: 1%;height: 100%;background: mistyrose;position: absolute;top: 0;left: 0;}button span {mix-blend-mode: darken;}button:hover:before {background: mistyrose;width: 100%;}</style>

一看就能懂啦，主要说一下

↑没用这个属性。那么通过z-index来调整只能够要么背景盖住图片，要么图片在背景之前。亦或是改变透明度这样并不好。所以使用mix-blend-mode属性。

闪烁一下按钮

<div id="shiny-shadow"><button><span>Hover me</span></button></div>#shiny-shadow {display: flex;align-items: center;justify-content: center;height: 100vh;background: #1c2541;}button {border: 2px solid white;background: transparent;text-transform: uppercase;color: white;padding: 15px 50px;outline: none;overflow: hidden;position: relative;}span {z-index: 20; }button:after {content: '';display: block;position: absolute;top: -36px;left: -100px;background: white;width: 50px;height: 125px;opacity: 20%;transform: rotate(-45deg);}button:hover:after {left: 120%;transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);}

不在赘述巧用before 通过变幻属性来达到效果。

顺便介绍一个滚动条

<body><div class="test test-1"><div class="scrollbar"></div></div><div class="test test-5"><div class="scrollbar"></div></div></body><style type="text/css">.test {width : 50px;height : 200px;overflow: auto;float : left;margin : 5px;border : none;}.scrollbar {width : 30px;height: 300px;margin: 0 auto;}.test::-webkit-scrollbar {/*滚动条整体样式*/width : 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px;}.test::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);background : #535353;}.test::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background : #ededed;}/* 蓝色的滚条 */ .test-5::-webkit-scrollbar {/*滚动条整体样式*/width : 10px; /*高宽分别对应横竖滚动条的尺寸 width是竖滚动条*/height: 1px;}.test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius : 10px;background-color: skyblue;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0.2) 75%,transparent 75%,transparent);}.test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);background : #ededed;border-radius: 10px;}</style>