这段内容描述了`.btn-default`类的CSS样式规则，用于定义按钮的基本外观，包括尺寸、颜色、边框、阴影和鼠标悬停效果。此外，还展示了特定状态（如活动和聚焦）下的样式变化。最后提到了一个名为.login-button的自定义类，用于创建具有特定颜色和大小的登录按钮，并在鼠标悬停时改变背景色。
.btn-default {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0, #e0e0e0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border-color: #dbdbdb;
border-color: #ccc;
}
.btn-default:active,
.open>.dropdown-toggle.btn-default {
background-image: none;
}
.btn-default:active,
.open>.dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.focus,
.btn:focus,
.btn:hover {
color: #333;
text-decoration: none;
}
.login-button {
/* 按钮美化 */
width: 270px;
/* 宽度 */
height: 40px;
/* 高度 */
border-width: 0px;
/* 边框宽度 */
border-radius: 3px;
/* 边框半径 */
background: #1E90FF;
/* 背景颜色 */
cursor: pointer;
/* 鼠标移入按钮范围时出现手势 */
outline: none;
/* 不显示轮廓线 */
font-family: Microsoft YaHei;
/* 设置字体 */
color: white;
/* 字体颜色 */
font-size: 17px;
/* 字体大小 */
}
.login-button:hover {
/* 鼠标移入按钮范围时改变颜色 */
background: #559922;
}
我是按钮
创建大屏
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
