CSS样式收藏

最新推荐文章于 2021-11-22 16:59:56 发布
最新推荐文章于 2021-11-22 16:59:56 发布
阅读量87 收藏
点赞数
分类专栏： web开发 文章标签： CSS Microsoft HTML

纯CSS精美Button样式收藏

<html>
<head>
<style>
.btn {height:35;
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {height:35;
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {height:35;
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0
4;font-size:12px;height:35;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {height:35;
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {height:35;
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{height:35;
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {height:35;
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {height:35;
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:
#002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96
1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #002D96 1px solid
}
</style>

</head>
<body><center>
<button class=btn>CSS按钮样式</button><P></p>
<button class=btn1_mouseout>CSS按钮样式</button><p>
<button class=btn1_mouseout DISABLED>CSS按钮样式</button>
<P>
<button class=btn2>CSS按钮样式</button>
<P>
<button class=btn2 DISABLED>CSS按钮样式</button>
<P>
<button class=btn3_mouseout>CSS按钮样式</button>
<P>
<button class=btn_2k3>CSS按钮样式</button></center>
</body>
</html>

 

滚动条样式收藏：

http://club.chinaren.com/club/static/huadong.htm

html  { 
SCROLLBAR-FACE-COLOR: #ffb15b; 
SCROLLBAR-HIGHLIGHT-COLOR: #FFE0BB; 
SCROLLBAR-SHADOW-COLOR: #FFC37F; 
SCROLLBAR-ARROW-COLOR: #FC8521; 
SCROLLBAR-BASE-COLOR: #FFC37F;
scrollbar-3d-light-color: #FFC37F; 
scrollbar-dark-shadow-color: #FFC37F 
}
html {width: 100%;
 scrollbar-face-color: #cee3f6;
 scrollbar-highlight-color: #ffffff;
 scrollbar-shadow-color: #83b5e8;
 scrollbar-3dlight-color: #cee3f6;
 scrollbar-arrow-color: #83b5e8;
 scrollbar-track-color: #cee3f6;
 scrollbar-darkshadow-color: #cee3f6;
 scrollbar-base-color: #000000;
}

 
 

.feat_window {
	SCROLLBAR-ARROW-COLOR: black;
	SCROLLBAR-FACE-COLOR: #dedede;
	SCROLLBAR-DARKSHADOW-COLOR: #9d9d9d;
	SCROLLBAR-BASE-COLOR: #f5f5f5;
	HEIGHT: 140px;
	SCROLLBAR-HIGHLIGHT-COLOR: #f5f5f5;
	SCROLLBAR-SHADOW-COLOR: #ebf5ff;
	OVERFLOW: auto;
	SCROLLBAR-TRACK-COLOR: #f5f5f5;
	SCROLLBAR-3DLIGHT-COLOR: #c3c3c3
}

 

goodday2023
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页样式CSS
nangon1234的博客
04-18 1202
1.CSS 技术 文档:CSS2.0.chm 1.1 CSS 技术介绍 CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 1.2 CSS 语法规则 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。 属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（ declaration），例如：p {color:.
CSS样式代码收藏
12-27
用于各种语言制作网页时的网页布局，方便用户对自己网页的规划
一些CSS样式的收藏
weixin_47616219的博客
09-26 164
修改浏览器的滚动条 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 5px; /*定义滚动条宽度*/ height: 5px; /*定义滚动条高度*/ border-radius: 5px; /*定义滚动条圆角*/ background-color: rgba(240, 240, 240, 0.1); /*定义滚动条颜色*/ background: rgba(240, 240, 240, 0.1); /*定义滚动条颜色*/ .
收藏的不错的CSS样式
Wind_Lam的专栏
05-11 456
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-T
收藏html和css样式
lobster
08-20 502
1.css3动画代码片段 http://netsmell.com/post/css3-animation-sniplet.html?ref=myread#/ 主要包括：引起注意动画效果／弹跳出现效果／弹跳消失效果／淡入淡出 出现效果／淡入淡出 消失效果／翻转效果／极速效果／旋转效果／旋转出现效果／旋转消失效果／特殊效果／放大缩小 出现效果／放大缩小 消失效果／滑动出现效果／滑动消失效果
45个值得收藏的 CSS 形状
Lee的博客
05-06 1884
45个值得收藏的 CSS 形状 CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素中的::before和::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙...
css样式收藏笔记
weixin_43954090的博客
02-12 64
css样式收藏笔记
前端—css样式
m0_45127388的博客
06-24 1019
css介绍： 使用形式： 内容： 1、 2、
CSS样式表常用小技巧收藏
10-31
CSS样式表常用小技巧收藏
csdn 博客的css样式 v3
09-06
《csdn博客的CSS样式V3：修复与优化详解》 在互联网技术日新月异的今天，网站的界面设计与用户体验成为了至关重要的因素。csdn博客作为国内知名的IT技术交流平台，其博客样式不断迭代更新，以适应不同浏览器和用户...
漂亮的CSS3按钮样式集合源码免费下载
11-05
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制和动画效果，极大地提升了用户体验。...所以，无论你是新手还是经验丰富的开发者，这个“漂亮的CSS3按钮样式集合”都是值得探索和收藏的宝贵资源。
csdn 博客的 css样式 v5
01-19
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。...去掉收藏按钮的样式修改调整了一下css，以适应csdn的修改。  详见红字 #SubscriptionList {display:none;}#csdnbl
css 小功能实现收藏
DumBnessA的博客
11-22 735
//字体超出俩行 隐藏显示省略号 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
最新发布
07-18
摩根：2024年大市前瞻
计算机控制专业技术专题实习任务书温度控制.doc
07-18
计算机
计算机控制系统.doc
07-18
计算机
计算机模拟考试.doc
07-18
计算机
css实现点击收藏功能
04-24
首先，定义一个收藏按钮，然后使用CSS样式来设计按钮的样式。接着，绑定一个点击事件，当用户点击按钮时，使用JavaScript代码中的localStorage属性将收藏内容存储至本地浏览器中。在下次用户访问页面时，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值