`
黄继华
  • 浏览: 45069 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

按钮样式

 
阅读更多

<!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 onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
>按钮样式2</button>
<br />
<br />
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED
>按钮样式3</button>
<P>
<button class=btn2>按钮样式4</button>
<P>
<button class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="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>


分享到：
| Js实现无缝隙滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CssButton按钮样式

    本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...

    c# winform 非常漂亮的按钮 玻璃按钮效果 按钮样式 风格 希望可以给大家提供帮助 源码

    总的来说，自定义C# WinForm的按钮样式是提高应用程序用户体验的有效途径，而玻璃按钮效果则是其中的一种流行设计。通过深入研究并应用这样的源码，开发者可以为自己的程序添加独特的视觉元素，使得用户界面更加...

    漂亮的WPF按钮样式，水晶效果

    "漂亮的WPF按钮样式，水晶效果"这个主题着重于如何利用WPF的样式和模板机制，为按钮控件创建出吸引人的、具有水晶质感的视觉效果。这种效果能够提升应用的整体视觉吸引力，增强用户对软件的第一印象。 WPF（Windows...

    漂亮的C#WPF自定义按钮样式

    在C# WPF（Windows Presentation Foundation）开发中，创建自定义按钮样式是提升用户界面美观性和交互性的重要手段。WPF提供了一套强大的样式和模板系统，允许开发者完全定制控件的外观和行为。本教程将深入探讨如何...

    好看的WPF自定义按钮样式（绝对不亏）

    在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中创建美观且自定义的按钮样式。WPF是微软提供的一个强大的用户界面框架，它允许开发者通过丰富的图形和动画来构建应用程序。自定义控件样式...

    50超炫的按钮样式

    在网页设计中，按钮样式是用户体验的一个重要组成部分。"50超炫的按钮样式"集合提供了丰富的设计资源，旨在帮助开发者和设计师创造出吸引眼球且功能性强的交互元素。这个压缩包包含三个主要文件：`button.css`、`...

    风格清新漂亮的CSS3开关按钮样式

    本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...

    button按钮样式表

    "button按钮样式表"是一个专门用于定制和美化网页中按钮样式的资源包，提供了多种预设的样式供设计师或开发者选择使用。这个压缩包文件包含了丰富的CSS样式代码，可以帮助你轻松打造出美观、吸引人的按钮。 样式表...

    button按钮样式美化

    为了适应不同设备的屏幕尺寸，可以使用媒体查询（Media Queries）来实现按钮样式的响应式设计： ```css @media (max-width: 600px) { button { font-size: 14px; padding: 6px 12px; } } ``` 六、预处理语言 ...

    50个按钮样式css+div

    这个“50个按钮样式css+div”资源集合提供了一种高效的学习方法，帮助开发者和设计师掌握如何利用CSS来定制各种各样的按钮样式，提升网站的视觉效果和用户体验。下面将详细探讨这些知识点。 1. CSS基础：首先，理解...

    JavaScript\JS\按钮类css按钮样式1

    根据提供的文件信息，我们可以总结出以下关于 JavaScript 和 CSS 按钮样式的相关知识点： ### 一、HTML 页面结构 1. **文档类型声明**：虽然文档中未明确指定，但通常一个完整的 HTML 文件应该以 `&lt;!DOCTYPE ...

    CSS按钮样式大全(精选)

    "CSS按钮样式大全(精选)"是一个资源集合，提供了多种不同风格的按钮样式，适用于各种网页设计需求。这个压缩包可能包含了多个CSS文件和示例HTML文件，用于演示如何通过CSS代码实现这些精美的按钮效果。 首先，我们...

    c# winform glassbutton 很漂亮的按钮样式 玻璃按钮

    c# winform编程 玻璃按钮样式 非常漂亮的按钮样式库，直接打开可以使用，支持VB,大家下载吧。

    单选复选按钮样式

    在移动应用和网页设计中，按钮样式是用户体验的重要组成部分，特别是在单选和复选框的设计上。"单选复选按钮样式"这个主题主要关注如何创建吸引人的、易用的移动端交互元素，以提高用户的操作体验。下面我们将深入...

    WPF炫酷旋转按钮样式

    **WPF炫酷旋转按钮样式**是Windows Presentation Foundation（WPF）中的一种创新设计，用于创建具有视觉吸引力的用户界面元素。WPF是.NET Framework的一部分，提供了丰富的图形和UI功能，使得开发人员能够构建出美观...

    各种CSS按钮样式

    "各种CSS按钮样式"的主题聚焦于利用CSS创建不同风格和功能的按钮，这些按钮是用户界面中的关键元素，用于触发交互。这篇博文可能是介绍了一系列CSS技巧和代码示例，帮助开发者实现多种视觉效果的按钮。 首先，CSS...

    asp.net 按钮 样式 源码

    本文将深入探讨ASP.NET按钮样式的源码及其背后的实现原理。 在ASP.NET中，按钮样式通常通过CSS（层叠样式表）来定制。CSS允许开发者控制网页元素的外观，包括字体、颜色、大小、布局等。对于按钮样式，我们可以...

    5款纯css3按钮样式

    在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了更多创新和自定义的可能性，其中之一就是创建丰富的按钮样式。本资源“5款纯css3按钮样式”就是一个很好的例子，展示了如何利用CSS3的特性来打造吸引眼球且...

    css3 input按钮样式代码.zip

    本资源"css3 input按钮样式代码.zip"正是利用这些特性来定制input类型的按钮样式，以增强页面的视觉效果和用户体验。 输入框(input)是HTML表单中的基本元素，通常用于用户输入数据。在传统HTML中，input按钮样式...

    网页常用css3按钮样式代码

    在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，尤其是在创建美观且具有交互性的按钮样式方面。本资源“网页常用css3按钮样式代码”包含了一系列实用的CSS3代码片段，帮助设计师和前端...

Magicbox
Global site tag (gtag.js) - Google Analytics