- 1Mac系统搭建Flutter开发环境-持续更新_复制flutter安装包路径,vim .zshrc,添加flutter到pathcd1`
- 2网工必备知识-读懂路由表中的参数_路由表参数
- 3STM32智能家居系统教程_stm32开发智能家居
- 4Flutter入门必知小技巧
- 5前端性能优化（vite）_vite优化peizhi
- 6【git】如何实现规范git commit -m的格式
- 7说点大实话
- 8Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目_element 后台网站
- 9SSM框架整合——常用方式整合SSM框架（三）Spring和MyBatis整合
- 10windows中vscode配置C/C++环境_windows10配置vscode
CSS3翻页按钮_css 下一页按钮
赞
踩
按钮样式图
在CSS当中设定按钮的样式，颜色、阴影、大小、圆角、文字颜色、大小、线性渐变等属性:
.button {
display: inline-block;
position: relative;
color: #888;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
text-decoration: none;
text-align: center;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
font-family: helvetica, arial, sans-serif;
border-radius: 4px;
border: 1px solid #bcbcbc;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
}
然后设定上一页与下一页的按钮不同的样式
上一页：
.button.back {
border-left: none;
}
.button.back:after {
content: '';
position: absolute;
height: 50%;
width: 15px;
border-left: 1px solid #bcbcbc;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
left: -5px;
top: 1px;
-webkit-transform: skew(-35deg, 0);
-moz-transform: skew(-35deg, 0);
-o-transform: skew(-35deg, 0);
-ms-transform: skew(-35deg, 0);
transform: skew(-35deg, 0);
}
.button.back:before {
content: '';
position: absolute;
height: 48%;
width: 15px;
border-left: 1px solid #bcbcbc;
bottom: 1px;
left: -5px;
-webkit-transform: skew(35deg, 0);
-moz-transform: skew(35deg, 0);
-o-transform: skew(35deg, 0);
-ms-transform: skew(35deg, 0);
transform: skew(35deg, 0);
background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
-webkit-box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
}
下一页：
.button.next {
border-right: none;
}
.button.next:after {
content: '';
position: absolute;
height: 48%;
width: 15px;
border-right: 1px solid #bcbcbc;
background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
right: -5px;
bottom: 1px;
-webkit-transform: skew(-35deg, 0);
-moz-transform: skew(-35deg, 0);
-o-transform: skew(-35deg, 0);
-ms-transform: skew(-35deg, 0);
transform: skew(-35deg, 0);
-webkit-box-shadow: 2px 1px 2px rgba(100,100,100,0.1);
box-shadow: 2px 1px 2px rgba(100,100,100,0.1);
}
.button.next:before {
content: '';
position: absolute;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
height: 50%;
width: 15px;
border-right: 1px solid #bcbcbc;
top: 1px;
right: -5px;
-webkit-transform: skew(35deg, 0);
-moz-transform: skew(35deg, 0);
-o-transform: skew(35deg, 0);
-ms-transform: skew(35deg, 0);
transform: skew(35deg, 0);
}
