button样式收藏

最新推荐文章于 2024-07-23 11:30:08 发布
最新推荐文章于 2024-07-23 11:30:08 发布
阅读量113 收藏
点赞数
分类专栏： 日常解决的问题积累 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17253/article/details/82128659
版权 
<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>

 

iteye_17253
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
收藏的几个css按钮样式
07-17
收藏的几个css按钮样式,经常会在网页设计中碰到的几款左面经典按钮。
Wpf Button样式例子
hsg77的专栏
05-19 8339
Resources/Button.xaml-------------------------------------------------http://schemas.microsoft.com/winfx/2006/xaml/presentation"                    xmlns:x="http://schemas.microsoft.com/winfx/2006
（收藏）漂亮的css button样式汇总
lin123_00的博客
04-26 8123
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。 下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！ ——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提...
收藏的不错的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 按钮button加超链接
热门推荐
每天进步一点点 时间会让你成为巨人
05-10 8万+
1.页面转向新的页面: 2.需要打开一个新的页面进行转向: 由于浏览器内核不一样 IE中使用: firefox中使用:
CSS样式表常用小技巧收藏
10-31
.button:hover { background-color: #008CBA; } ``` #### 三、布局与间距 **1. 内边距与外边距的使用** - **外边距**: 当需要为嵌套元素间的间距时，应使用内部元素的`margin`而非外部元素的`padding`。 - **...
50多个超漂亮水晶Button按钮样式大集合
05-12
内容索引:脚本资源,CSS特效,按钮,水晶按钮　50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能...
直播页面收藏
06-04
3. **状态更新**：收藏后，页面需要反馈给用户已收藏的状态，例如改变收藏按钮的图标或文字，这可以通过修改DOM元素的样式或内容来实现。 4. **错误处理**：考虑可能出现的异常情况，如本地存储超出限制，应有相应的...
WPF绚丽的收藏夹
11-15
例如，创建一个收藏夹窗口，我们可以在XAML中定义Grid或StackPanel作为布局容器，然后添加多个Button或ListBox元素，代表不同的收藏项。 **数据绑定**是WPF中的关键特性，允许UI元素与后台数据模型进行交互。在创建...
收藏、点赞按钮 怎么由当前的状态（收藏/取消收藏）通过点击设置为取消收藏（收藏）
文化园
12-02 1万+
收藏、点赞按钮 怎么由当前的状态（收藏/取消收藏）通过点击设置为取消收藏（收藏）即通过获得并依据当前已经显示的状态，来设置点击操作后应该显示的状态！
纯CSS精美Button样式收藏
ak47947
06-20 783
&lt;html&gt; &lt;head&gt; &lt;style&gt; .btn {height:35; BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DX...
微信小程序收藏按钮五角星星图标动画效果实现
php全栈程序员，小李子9479。编程培训，提供产品级插件，
10-01 6183
先上个效果图： wxml文件比较简单，就一个图片，如下 &lt;image src="{{imgurl}}" style="width:100px;height:100px;" bindtap="et_submit" animation="{{dhdata}}"&gt;&lt;/image&gt; 其中imgurl是图片的地址，正常状态是灰色空的，收藏成功后变成黄色实心的，再点击就变成
HTML-点击收藏功能模块
weixin_30731305的博客
12-18 1560
先上效果图： 功能简单： 附上源码以及注解 <div class="info-attribute" id="collect"> <input value="${userId}" type="hidden" class="userId"> <input value="${orderId}" t...
button 样式_（收藏）漂亮的css button样式汇总
weixin_39708502的博客
11-28 4865
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新...
简单又好看的按钮，扁平化按钮。
weixin_30516243的博客
03-30 82
分享一下流行的扁平化按钮。完全不需要用到图片哦。效果图如下： 里面有2个按钮都是一样的模式。只要修改的色值就可以。下面跟我来更新你的UI吧。 首先编写　button.xml 代码如下 [html]view plaincopy <?xmlversion="1.0"encoding="utf-8"?> <selector...
几款好看的按钮样式收藏
weixin_34127717的博客
05-17 881
Button ButtonButton Button Button-2 2k3 Button .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px...
HTML设为首页/加入收藏代码
qll_24的博客
01-19 5156
（特别注意：要把’这个符号换成无任何输入法状态中输入的’这个符号，否则程序无法运行）    1.文字型：     设为首页     2.按钮型：     设为首页 " onclick="this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);" h
css class 多种规则判断样式
Little___Turtle的博客
07-22 275
商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断。
CSS进阶探索：动画与过渡效果
最新发布
2301_79375313的博客
07-23 443
在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让你的网页设计更上一层楼。
简述button控件与imagebutton控件的优缺点
06-08
2. 样式灵活：Button控件的样式可以通过布局文件和代码进行自定义，支持文字、背景色、边框等多种属性。 3. 适用广泛：Button控件适用于各种场景，如登录、注册、提交等。 Button控件的缺点： 1. 样式单一：Button...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值