<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个比较好看的Button的CSS</title>
</head>
<body>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 1px;
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;
PADDING-BOTTOM: 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>
<p><button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>
<button class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="CSS样式按钮">CSS样式按钮</button>
<p><button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>灰色CSS样式按钮</button>
<P>
<button class=btn2 title="CSS样式按钮">CSS样式按钮</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'"
title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
</html>
分享到：
相关推荐
"好看的button样式CSS"这一主题涉及到以下几个关键知识点： 1. **基本样式设置**：使用`display: inline-block`属性将按钮设置为块级元素，以便占据整行宽度；`padding`属性可以调整内部间距，`font-size`定义字体...
### WPF Button样式的深入解析 在WPF (Windows Presentation Foundation) 开发中，自定义控件样式是一项非常重要的技能，尤其是对于按钮(Button)这样的常用控件。通过自定义样式，开发者可以为用户提供更加丰富多样...
在WPF中，自定义按钮样式通常涉及以下几个步骤： 1. **定义资源**：在XAML文件的根元素下创建`ResourceDictionary`，并在其中定义按钮的样式。这样可以方便地在整个应用程序中重用该样式。 2. **创建样式**：使用`...
因此，本文将介绍几款经典的 C# Button 样式，帮助开发者快速实现不同的 Button样式。 一、 btn 样式 第一个样式是 btn 样式，这个样式使用了 CSS 来设置 Button 的样式。这个样式的特点是使用了渐变颜色，鼠标...
本文将深入探讨如何自定义Button样式，特别是创建具有圆角效果的按钮，即“圆角按钮”。我们将从以下几个方面进行详细讲解： 1. **XML布局中的基本设置** 在Android布局文件中，我们通常使用`<Button>`标签来创建...
标题“类似附带几个button的view，点击button的时候，实现button动画移动”所提及的内容，是关于如何在Android或iOS平台上创建一个包含多个按钮的视图，并在用户点击按钮时触发动画效果，使按钮看起来像是在移动。...
默认情况下，浏览器会提供一个简单的样式，但我们可以根据需求通过CSS来定制按钮的外观。 2. 鼠标悬停效果： 通过CSS的`:hover`伪类，我们可以给按钮添加鼠标悬停时的效果： ```css button:hover { background-...
本资源集合了"50个CSS超炫丽button样式"，旨在展示CSS的灵活性和创新性，帮助开发者和设计师们激发灵感，提升网页界面的吸引力。 这些CSS按钮样式各具特色，涵盖了不同的设计风格，包括但不限于以下几点： 1. **...
【标签】"C# ASP.NET SQL DBA 源码"虽然与标题中的CSS按钮样式直接关联性不大，但它们代表了IT行业的几个关键领域，这可能意味着这些CSS代码可能被用在基于这些技术构建的项目中。C#和ASP.NET是微软开发的服务器端...
### 使用CSS将A链接模拟为Button样式的方法 在网页设计中，经常需要让普通的超链接（`<a>`标签）看起来像按钮一样，这样可以增强用户体验，并使界面更加美观、一致。通过使用CSS，我们可以轻松地实现这一效果。本文...
在本例中，我们将关注如何自绘Button，使其具有非标准的背景色和前景色，从而打破传统的VC++ Button样式。"自绘Button 修改Button背景"这个标题表明我们将探讨如何利用`WM_DRAWITEM`消息来改变Button的默认外观。 `...
按钮控件（Button）作为用户交互的主要元素之一，其样式和外观设计常常需要根据应用的需求进行定制，以达到吸引用户并提升应用整体美感的目的。本篇文章将介绍几款经典的C#按钮样式，帮助开发者们在创建用户界面时...
2. CSS Button样式： - 文本样式：可以使用`color`、`font-size`、`font-family`等属性改变按钮的文字颜色、大小和字体。 - 背景和边框：使用`background-color`、`border`、`border-radius`等属性改变按钮背景和...
1. **XML布局文件**：在Android的布局文件（如activity_main.xml）中，我们可以定义一个Button元素，并通过设置其背景属性（`android:background`）来实现透明效果。例如，使用`@android:color/transparent`引用系统...
在这个示例中，我们首先创建了一个新的`Button`实例，然后设置了它的几个关键属性：`Text`（按钮上的文本）、`Size`（按钮的尺寸）和`Location`（按钮的位置）。接着，我们使用匿名方法（`delegate`关键字）为`Click...
我们将讨论以下几个关键知识点： 1. **自定义控件基础**： 自定义控件通常是为了满足特定需求，比如特殊的布局、动画或者交互效果。在Android中，我们可以通过继承已有的View或ViewGroup类来创建自定义控件。在这...
我们将讨论以下几个关键知识点： 1. **分享组件的原理**： 分享组件通常是通过JavaScript或者HTML5 API实现的，它们通过调用各社交平台提供的API来生成分享链接，然后在用户点击分享按钮时触发。这些API通常要求...
在C++中实现这样的Hover按钮，我们需要了解以下几个关键知识点： 1. **窗口库**：通常，C++标准库本身并不提供GUI支持，因此我们需要引入第三方库如Qt、wxWidgets、GTK+等。这里没有具体提及使用哪个库，但我们将以...
在实现自定义button为图片的样式时，有几个CSS属性是必须的，例如background-size、background-repeat和border:none。这些属性确保图片能够正确地覆盖整个button区域，没有重复，并且移除了边框，使button看起来更像...
首先，CSS按钮样式通常包括以下几个方面： 1. **基本结构**：一个CSS按钮通常由HTML的`<button>`、`<input type="button">`或自定义`<div>`元素构建。在这个案例中，我们可能会看到一个使用`<div>`元素来模拟按钮的...