学习了若依框架,有时候bootstrap提供的按钮颜色并不能完全满足系统的需要 只有仅限的几个 所以在这时候需要增加自定义的按钮颜色

下边是两个在线生成bootstrap按钮颜色的网址

blog.koalite.com/bbg/v2/

twitterbootstrap3buttons.w3masters.nl/

创建一个.css文件

将下方的css复制到css文件中

页面引入该css文件

页面创建个按钮

 

 

.btn-black {
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #050505;
*background-color: #050505;
background-image: -moz-linear-gradient(top, #000000, #050505);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#050505));
background-image: -webkit-linear-gradient(top, #000000, #050505);
background-image: -o-linear-gradient(top, #000000, #050505);
background-image: linear-gradient(to bottom, #000000, #050505);
background-repeat: repeat-x;
border-color: #050505;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#050505', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.btn-black.disabled,
.btn-black[disabled] {
color: #FFFFFF;
background-color: #050505;
*background-color: #003bb3;
}

 

<button class="btn btn-black">btn-primary</button>
posted on 2021-11-19 13:28  独醉笑清风  阅读(1522)  评论(0编辑  收藏  举报