图片按钮

最新推荐文章于 2022-02-25 21:57:21 发布
最新推荐文章于 2022-02-25 21:57:21 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： ASP.NET 文章标签： filter border button url class c
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现的几个非常漂亮的按钮</title>
<style>
.btn  {} {
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  {} {
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  {} {
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:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout  {} {
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  {} {
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
 {} {
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  {} {
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  {} {
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>
<button class=btn title="好看的按钮">好看的按钮</button><P></p>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</button>
<P>
<button class=btn3_mouseout οnmοuseοver="this.className='btn3_mouseover'"
οnmοuseοut="this.className='btn3_mouseout'"
οnmοusedοwn="this.className='btn3_mousedown'"
οnmοuseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的按钮</button>
</body>
</html>
  /**/ /*按钮样式*/
.ButtonCss  {} {
    font-family: "Tahoma", "宋体";
    font-size: 9pt; color: #003399;
    border: 1px #003399 solid;
    color:#006699;
    BORDER-BOTTOM: #93bee2 1px solid; 
    BORDER-LEFT: #93bee2 1px solid; 
    BORDER-RIGHT: #93bee2 1px solid; 
    BORDER-TOP: #93bee2 1px solid;
    background-image:url(../Images/bluebuttonbg.gif);
    background-color: #e8f4ff;
    CURSOR: hand;
    font-style: normal ;
}
/**/ /*蓝色按钮样式*/
.blueButtonCss  {} {
    font-family: "Tahoma", "宋体";
    font-size: 9pt; color: #003366;
    border: 0px #93bee2 solid;
   /**//* BORDER-BOTTOM: #93bee2 1px solid; 
    BORDER-LEFT: #93bee2 1px solid; 
    BORDER-RIGHT: #93bee2 1px solid; 
    BORDER-TOP: #93bee2 1px solid;*/
    background-image:url(../Images/blue_button_bg.gif);
    background-color: #ffffff;
    CURSOR: hand;
    font-style: normal ;
}
/**/ /*红色按钮样式*/
.redButtonCss  {} {
    font-family: "Tahoma", "宋体";
    font-size: 9pt; color: #0066cc;
    border: 1px #93bee2 solid;
    BORDER-BOTTOM: #93bee2 1px solid; 
    BORDER-LEFT: #93bee2 1px solid; 
    BORDER-RIGHT: #93bee2 1px solid; 
    BORDER-TOP: #93bee2 1px solid;
    background-image:url(../Images/redbuttonbg.gif);
    background-color: #ffffff;
    CURSOR: hand;
    font-style: normal ;
}
/**/ /*绿色按钮样式*/
.greenButtonCss  {} {
    font-family: "Tahoma", "宋体";
    font-size: 9pt; color: #0066cc;
    border: 1px #93bee2 solid;
    BORDER-BOTTOM: #93bee2 1px solid; 
    BORDER-LEFT: #93bee2 1px solid; 
    BORDER-RIGHT: #93bee2 1px solid; 
    BORDER-TOP: #93bee2 1px solid;
    background-image:url(../Images/greenbuttonbg.gif);
    background-color: #ffffff;
    CURSOR: hand;
    font-style: normal ;
}

 

 

smallcoolpig
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF 图片按钮
stybill的博客
12-06 4万+
图片按钮 html设置,html怎么设置图片按钮
weixin_31119221的博客
06-11 2971
html设置图片按钮的方法：首先创建一个HTML示例文件；然后通过button标签创建一个按钮；最后通过background属性设置图片即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。html中把图片变成按钮代码如下：文字相关介绍： 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩...
html 按钮控制图片,html怎么设置图片按钮
weixin_33897367的博客
06-25 3504
html设置图片按钮的方法：首先创建一个HTML示例文件；然后通过button标签创建一个按钮；最后通过background属性设置图片即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。html中把图片变成按钮代码如下：文字相关介绍： 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩...
位图按钮
肖氏专栏
05-28 1950
位图按钮是由MFC提供的几种附加控件之一。在前一节的过程中，我们可以使用一个位图来代替文本作为下压按钮的标签。而在位图按钮中，我们可以使用多达四个位图来分别代表按钮处于四种不同的状态(凸起、按下、获得焦点或被禁止)下的显示。而且，使用位图按钮还可以去除掉令人讨厌的按钮黑边。而使用位图按钮并不复杂，但是相比起标准的按钮控件(它由Windows自身所提供)而言有一些特殊。下面的过程描述了位图按钮的使用
图片替换按钮
Vivinia的博客
03-10 757
目标效果： 1.在上一篇博客中，使用的是Button按钮，这一篇介绍使用ImageButton替换Button 2. 首先是需要将按钮图片复制到文件夹中，然后找到ImageButton控件，拖到右边屏幕指定位置。 3. 设置ImageButton的属性。 4. 在原Button代码中修改，基本与其一致。 5. EditText输入框左边设置
WPF样式图片按钮
11-28
在Windows Presentation Foundation (WPF) 中，样式图片按钮是一种结合了图像和按钮功能的控件，它可以提供更直观、更具视觉吸引力的用户交互体验。在本文中，我们将深入探讨如何在WPF中创建和使用样式图片按钮，...
WPF图片按钮的实现方法
10-19
在Windows Presentation Foundation (WPF) 中，创建一个图片按钮是一个常见的需求，这使得用户可以通过点击图像来触发某个操作。在WPF中，我们通常通过扩展现有的控件并自定义其模板来实现这样的功能。以下是一个...
Delphi图片按钮（支持PNG图片）
07-25
本图片按钮控件实现了按图片效果显示按钮（支持透明），效果不错！
wpf图片按钮
07-11
在Windows Presentation Foundation (WPF) 中，创建一个“图片按钮”可以增强用户界面的交互性和视觉效果。通过自定义按钮样式并结合数据绑定技术，我们可以实现按钮图片在鼠标单击时动态切换。以下是对这个主题的...
double.rar_图片按钮
07-15
在IT行业中，"double.rar_图片按钮"这个标题暗示了一个压缩包文件，它可能包含一个用于游戏"完美国际"的双开小工具。这个小工具是为玩家提供同时运行两个游戏客户端的能力，使得他们可以同时管理不同的角色或者进行...
K8s 很难么？带你从头到尾捋一遍，不信你学不会
民工哥的博客
02-23 8836
点击关注公众号，回复“1024”获取2TB学习资源！为什么要学习 Kubernetes?虽然 Docker 已经很强大了，但是在实际使用上还是有诸多不便，比如集群管理、资源调度、文件管理等...
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）
北豼不太皮的博客
02-21 3287
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）一、学习目标二、了解单片机STM32F401RET6三、C语言基础 一、学习目标 二、了解单片机STM32F401RET6 4、STM32F401RE特征 三、C语言基础 1.数据类型 常用2的次方： 2^7 = 128 2^8 = 256 2^15 = 32768 2^16= 65536 51单片机常见的数据类型： char: 占内存1字节 取值范围：-128~127 -2^7 ~ 2
Android开发（1） | Fragment 的应用——新闻应用
Jormungand_V的博客
02-21 6369
文章目录 news_item.xml： <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:lines="1" android:ellipsize="
系统学习 TypeScript（四）——变量声明的初步学习
编程三昧
02-25 1549
认识了 TypeScript 中的基础类型，接下来当然是变量声明的相关学习了，我在这里记录一下我学习过程中的一些总结。
清除浮动的五种方法
weixin_52212950的博客
02-22 2493
为什么要清除浮动？因为往往浮动后的子元素因为脱离了标准流，不能自动撑起父元素的高度，所以会对后续布局产生影响，对此清除浮动不如理解为清除浮动产生的影响更为合理。 例如：我们设置了两个盒子如图所示，粉色为父盒子，只有宽度没有高度，蓝色盒子有宽有高，粉色盒子的高由蓝盒子的高度撑开。 但是给蓝色的子盒子设置了左浮动后，脱离了标准流，无法再撑开粉盒子，可以看到粉盒子高度变成了0； 清除浮动有五种方法： 直接设置父元素的高度 额外标签法 单伪元素法 双伪元素法 ove.
HTML实现学习网站首页
做技术，坚持才是最重要的，一时的热情只是暂时的进步
02-20 4004
项目访问 reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del
C语言经典小游戏之----推箱子
嵌入式技术开发
02-25 4587
在进行推箱子的实验中，可以使用对应的API函数来改变对应箱子的颜色，也需要根据，人在移动的过程中，可以通过方向键，并改变对应的颜色，从而实现控制人物的目的。 代码实现如下： #include<stdio.h> #include<stdlib.h> #include<string.h> #include<windows.h> #include<conio.h> int x = 0, y = 0; //存储当前使用的...
关于Dubbo的mock=true降级无法调用降级类ServiceMock的解决方案
weixin_45754452的博客
02-25 1349
问题 消费者使用mock=“true”，想调用TestServiceMock进行服务降级无法调用 原因 我的项目结构如下，首先要知道服务降级代码应该是谁执行的，服务降级是服务消费者也就是controller包处对应的服务执行的，因为我只是测试dubbo怎么使用，所以并没有分多模块，但完全可以把一个包理解为一个模块，再看下面配置文件 为什么可以把一个包当成一个模块呢，因为我把配置文件的scan改成controller包然后启动一个服务器，即消费者，如果把scan改成service则可以启动服务提供者服务器
Vue---Vue基础
前端与计算机相关知识的分享，博主的qq523235674
02-25 1400
一.Vue概述 二.Vue的基本使用 2.1Vue.js之hello world 基本实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> </.
javafx 图片按钮
最新发布
05-12
在JavaFX中，可以使用ImageView和Button来创建一个图片按钮。以下是一个简单的示例代码： ``` Image image = new Image("/path/to/image.png"); // 设置图片路径 ImageView imageView = new ImageView(image); // 创建 ImageView 对象 Button button = new Button(); // 创建按钮对象 button.setGraphic(imageView); // 将 ImageView 对象设置为按钮的图形 // 设置按钮点击事件 button.setOnAction(event -> { // 处理点击事件 }); // 将按钮添加到场景中 Scene scene = new Scene(new StackPane(button), 400, 300); ``` 注意，需要将图片文件放到项目的资源文件夹中，并指定正确的路径。另外，也可以使用CSS来为按钮设置样式，以达到更好的视觉效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值