不错的CSS样式[漂亮的按钮]

最新推荐文章于 2021-08-04 08:58:36 发布
转载 最新推荐文章于 2021-08-04 08:58:36 发布 · 2.4k 阅读 · 0
文章标签：

#css #button #filter #class #table #c

本文详细介绍了一组使用CSS设计的不同样式的按钮，包括多种状态下的样式调整。这些按钮样式各异，适用于不同场景的需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>
  <style type="text/css">
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>
</head>
<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>
 
36种漂亮的CSS3网页按钮Button样式
03-18
内含36种 button的界面效果，纯css3制作，需要的拿去，分享是第一美德！
精美CSS按钮样式集合（更新中）
最新发布
m0_58525425的博客
06-12 254
【代码】前端按钮样式（更新中）
几个实用又好看的纯css 按钮样式
热门推荐
qq_43682422的博客
08-04 4万+
几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;
纯CSS3 漂亮的按钮实例
moliyll的专栏
05-29 1154
纯 CSS3 打造的按钮实例 | HTML5、CSS3、DEMO 实例 body {     background: #ededed;     width: 900px;     margin: 30px auto;     color: #999; } p {     margin: 0 0 2em; } h1 {     margin: 0; } a {
风格清新漂亮的CSS3开关按钮样式
06-11
我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和伪元素。这些是用于添加特殊效果的关键工具，例如`:checked`伪类可以检测复选框的状态，`:...
css样式制作的漂亮按钮
12-13
【CSS样式制作漂亮按钮】 在网页设计中，创建吸引人的按钮是至关重要的，因为它能引导用户进行交互。这里我们将深入探讨如何使用CSS样式来制作漂亮的按钮。首先，我们需要理解CSS的基本概念，它是一种用于描述HTML...
漂亮的CSS3按钮样式集合源码免费下载
11-05
本文将深入探讨“漂亮的CSS3按钮样式集合”这一主题，介绍如何利用CSS3特性创建出美观且功能强大的按钮，以及如何通过源码免费下载来学习和应用这些样式。 首先，CSS3的按钮样式主要依赖于以下几项关键技术： 1. *...
CssButton按钮样式
09-21
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...
一组漂亮的css3按钮（各种颜色+样式）
12-13
纯css3，不支持ie8以下浏览器
好看的button样式CSS
09-01
好看的button样式CSS,你值得下载，
漂亮的按钮css样式表
09-02
漂亮的按钮css样式表
超漂亮的CSS 按钮 button
10-05
超漂亮的CSS 按钮 button
漂亮简单的网页css按钮样式
10-30
漂亮的CSS按钮样式单，只需要通过简单的CSS样式单，就可以实现各种样式的按钮，使用简单、方便。
好看的button样式
01-03
分享50个CSS超炫丽button样式代码下载分享50个CSS超炫丽button样式代码下载
很漂亮的按钮css样式（没有用到图片，可直接拷贝代码使用）
10-27 503
对于程序员，有时候也需要对页面风格做些改动，整体的页面风格还是美工的工作。 按钮其实是程序员很常用的，如果美工没有设计好，那就自己设计吧。 在网上发现有乐于奉献的人共享了代码。效果很好，而且没有使用到图片，这个很重要。 如果你使用别人的css，里面又用到了图片，那这个样式是没法使用的，除非，你能在网上下载使用到的图片，。 这个网址; http://www.webdesignerwall...
CSS：一些CSS按钮样式
燕双嘤
03-20 6034
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>9.3</title> <style type="text/css"> @font-face { font-family: 'EntypoRegular'; ...
ASP.NET页面中实现漂亮按钮的CSS样式教程
最后，“漂亮的按钮 .txt”可能是一个包含CSS样式的文本文件，通常包含有关如何设置样式类的说明以及对应代码。开发者可以将这些样式类应用到ASP.NET页面中的按钮控件上，以实现视觉上的美化。 综上所述，如果要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值