按钮样式

最新推荐文章于 2023-06-09 10:15:19 发布
最新推荐文章于 2023-06-09 10:15:19 发布
阅读量2k 收藏
点赞数
分类专栏： Div+CSS 文章标签： filter button class border xhtml c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangjihua0402/article/details/4159818
版权

<!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-Type" content="text/html; charset=gb2312" />
<title>收藏的几个css按钮样式</title>
</head>
<style>
table {
width:95%;
border: 1px #E6D1B0 solid;
background-color: #efe3ce;
font-size:11px;
font-family:Tahoma;
color:#FF6600;
text-align:center;
}
            .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>
<body> 
漂亮的按钮
<table>
<tr>
<td>
Hello world!
</td>
</tr>
</table>
            <button class=btn>按钮样式1</button>
            <br />
            <br />
            <button
            class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
             οnmοuseοut="this.className='btn1_mouseout'"
            >按钮样式2</button>
            <br />
            <br />
            <button
            class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
             οnmοuseοut="this.className='btn1_mouseout'" DISABLED
            >按钮样式3</button>
            <P>
            <button class=btn2>按钮样式4</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'"
            > 按钮样式5</button>
            <P>
            <button class=btn_2k3>按钮样式6</button>
</body>
</html>
漂亮的链接
<style>
<!--
body { font-family: Tahoma; font-size: 8pt }
.leftmenu {
width:150px;
}
.leftmenu li {
display: inline;
white-space: nowrap;
}

.leftmenu span,
.leftmenu a:active,
.leftmenu a:visited,
.leftmenu a:link {
  display: block;
  text-decoration: none;
  margin: 6px 10px 6px 0px;
  padding: 2px 6px 2px 6px;
  color: #00527f;
  background-color: #d9e8f3;
  border: 1px solid #004266;
}

.leftmenu a:hover {
  color: red;
  background-color: #8cbbda;
}

.leftmenu span {
  color: #a13100;
  }

-->
</style>
</head>
<ul class="leftmenu">
<li><a target="_blank" href="http://www.microsoft.com/china">www.Microsoft.com</a>
<li><a target="_blank" href="http://www.google.com">www.Google.com</a>
<li><a target="_blank" href="http://www.csdn.net/">www.CSDN.Net</a>
</ul>


 

踏坑的手艺人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html按钮圆弧样式,几款不错的按钮样式汇总
weixin_36072709的博客
06-17 2392
几款不错的按钮样式汇总在网页设计中按钮一般默认的都比较“丑”，能不能通过一些好的`样式来设计呢，下面提供几款不错的按钮样式，希望对大家有所帮助。一、带图标的按钮·按钮样式截图·按钮样式代码如下：/* CSS Document *//* BUTTONS */.buttons a, .buttons button{ display:block; float:left; marg...
html5 a标签按钮样式,a标签按钮样式
weixin_36407256的博客
06-15 2435
a {display:inline-block;margin:0px 0px 5px 5px;padding:6px 8px;font-size:14px;outline:none;text-align:center;width:50px;line-height:30px;cursor: pointer;}a.btn_a:hover {color:white;background-color:rg...
50多个超漂亮水晶Button按钮样式大集合
07-22
50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能用得上，或许你现在用不上，但下载收藏起来，日后用起来方便多了。
qt按钮样式
热门推荐
weixin_42887343的博客
03-01 1万+
qt种按钮样式设置，显示效果如上图所示。 qss代码： /**正常情况下样式**/ QPushButton{ font: 10pt "微软雅黑"; color: #2f3640; background-color: #f5f6fa; border-color: #2f3640; border-radius: 15px; border-style: solid; border-width: 2px; padding: 5px; } /**鼠标停留在.
CSS按钮样式
南明离火的博客
07-01 9778
CSS按钮样式
各种按钮样式
start_XUEBA的博客
03-17 2739
用css写了几个按钮样式：静态的，不可编辑的，立体的，圆角的，胶囊状的，动态效果的样式。 效果预览（录屏保存后有点抖动，稍微有点影响最后两个效果）： 要写按钮样式首先要去除按钮默认样式： 1、更改背景 background ； 2、去除边框或更改边框 border ； 3、去除默认的按钮点击后的蓝色边框，这是很容易忽略的一个：outline:none; 最后一个动态渐变按钮使...
Android按钮样式
扮作大侠的博客
03-05 3426
<style name="button1"> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#FFFFFF</item> <item name="android:textSize">22dp</item> <item nam...
WPF的按钮样式
最新发布
weixin_43497445的博客
06-09 1316
1-设置圆角第一种。
QSS按钮样式
方池安夏的博客
07-31 3316
1.2 Qt样式表语法 （1）样式规则 每个样式规则由选择器和声明组成。 选择器：指定受该规则影响的部件。 声明：指定这个部件上要设置的属性 如：QPushButton{color:red} QPushButton是选择器； {color:red}是声明； color是属性； red是值。 （2）选择器类型 （3）子部件 对于一些复杂的部件修改样式，可能需要访问它们的子部件，如QComboBox的下拉按钮，QSpinBox的向上、向下箭头灯。 如： 下拉按钮设置图片属性： QComboBox::
漂亮的C#WPF自定义按钮样式
12-30
在C# WPF（Windows Presentation Foundation）开发中，创建自定义按钮样式是提升用户界面美观性和交互性的重要手段。WPF提供了一套强大的样式和模板系统，允许开发者完全定制控件的外观和行为。本教程将深入探讨如何...
html5分页导航按钮样式动画特效
06-24
"html5分页导航按钮样式动画特效"的主题聚焦于利用HTML5特性来实现分页导航的创新设计，旨在提升用户体验并增加网页的互动性。 分页导航是网页设计中的常见元素，尤其在处理大量数据或内容时，如博客、论坛和电子...
CSS使用classList实现两个按钮样式的切换
09-27
在网页设计中，有时我们需要创建交互式用户界面，其中就包括了按钮样式的切换。CSS（Cascading Style Sheets）提供了强大的样式控制能力，而JavaScript则可以赋予网页动态交互的功能。在这种情况下，我们可以利用DOM...
风格清新漂亮的CSS3开关按钮样式
06-11
本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...
CssButton按钮样式
09-21
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...
圆形按钮样式
Qt君
09-16 1823
大家中秋好。月饼圆，月亮圆，中秋团团圆圆。今天就分享关于圆的东西(圆形按钮样式)。
DIV+CSS布局网页必须考虑的浏览器兼容的技巧
Software development
01-13 2185
DIV+CSS布局网页必须考虑的浏览器兼容的技巧1,盒解释器的不同解释. #box{0 l& m7 v: k U   Y1 f; a# {width:600px; //for ie6.0-4 w. |* g0 D5 n3 `2 J8 ]/ ~- L1 T, P; k: /w/idth:500px; //for ff+ie6.0. X$ I1 k4 W8 _% c- M2 Z}5 z% Z
网页设计前端页面制作的规范要求和注意事项
Software development
09-11 1469
网页设计前端页面制作的规范要求和注意事项    1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。这样以减少http请求，从而降底网站的下载速度。     2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。什么样的图片属于内容：从数据库里取出来的图片。          凡是不属于内容的图片请都用背景。     1）页面代码，做到精简，逻辑性清楚；公用部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值