纯css写的各种小按钮合集，记录下来成为学习笔记

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

}

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

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

闪烁一下按钮

=====================================================================

html

Hover me

css

#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 通过变幻属性来达到效果。

顺便介绍一个滚动条

========================================================================

html

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
读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）