Write in front
I have been busy with internships recently, going to Guangzhou, renting a house, buying things and so on. After reading some blogs in fragmented time, I also saw a lot of button styles that I think are very good through pure css. It may be used in future development.
Light up button
<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);
}
To analyze it briefly, a div on the outer layer frames three buttons for display, which are arranged side by side through the flex layout, and then adjust the justify-content property to achieve the center display. After the allocation is done, color them separately. After that is the most important CSS :hover selector. Take the first one as an example. Find that button hover, which is the style generated when the mouse rolls over. First, the background color is changed to the button color, the font becomes white, and the border 0 directly makes it feel like the entire button is filled. After that, the shadow is set. In order to be compatible with the engines of different browsers, there are different attributes, but no matter which attribute, the attribute value is the same. Adjust the attribute value according to your own preferences, and the displayed effect will be the brightness and range. Which value adjustment will have any effect, see the document directly.
Filled button
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>
You can understand it at a glance, mainly to say 
↑ useless this attribute. Then the adjustment through z-index can only either cover the image with the background or the image before the background. Or it is not good to change transparency. So use the mix-blend-mode attribute.
Flash the button
<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);
}
I will not go into details and use before to achieve the effect through changing attributes.
By the way, introduce a scroll bar
<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>
Write at the back
After learning bootstrap or jquery-ui, etc., it seems to be easier and easier to achieve the style we want, but the buttons designed by pure css are not bad. It can also consolidate some css style attributes and so on. Is worth learning