几个比较好看的按钮样式

最新推荐文章于 2024-08-17 12:53:28 发布
最新推荐文章于 2024-08-17 12:53:28 发布
阅读量4.2k 收藏
点赞数
分类专栏： ASP.NET2.0 文章标签： button filter class c html qq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teng_s2000/article/details/1563078
版权

几个比较好看的按钮样式，文章来源 清清月儿

<html>

<head>

    <title>几个比较好看的按钮效果</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: #7EBF 4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF 4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF 4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF 4F 1px solid

        }

        .btn1_mouseover {

         BORDER-RIGHT: #7EBF 4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF 4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF 4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF 4F 1px solid

        }

        .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}

        .btn3_mouseout {

         BORDER-RIGHT: # 2C 59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: # 2C 59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: # 2C 59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: # 2C 59AA 1px solid

        }

        .btn3_mouseover {

         BORDER-RIGHT: # 2C 59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: # 2C 59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: # 2C 59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: # 2C 59AA 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: # 2C 59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: # 2C 59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: # 2C 59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: # 2C 59AA 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">

        好看的CSDN Button</button><p>

        </p>

    <button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'">

        好看的Green Button</button>

    &nbsp;

    <button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'"

        disabled>

        好看的Green Button</button>

    <p>

        <button class="btn2">

            好看的e商Button</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'">

            好看的QQ Button</button>

    <p>

        <button class="btn_2k3">

            好看的2k3 Button</button>

</body>

</html>

 

图片效果：

 
Teng_s2000
关注
专栏目录
好看的按钮button控件 delphi
07-06
该控件为好看的按钮控件，按钮样式多样，性能稳定，可以用于触摸屏控件,欢迎大家下载！
50个漂亮的按钮 50个漂亮的按钮
10-10
50个漂亮的按钮 50个漂亮的按钮 50个漂亮的按钮
3个好看的 button动画效果
最新发布
懒羊羊大王的博客
08-17 404
第一个button的效果为：点击按钮会有光圈的效果； 第二个button的效果为：鼠标悬停会有波浪效果； 第三个button的效果为：鼠标悬停会有光晕及渐变的效果。
用DELPHI实现特色按钮
今日红缨在手
07-25 2019
每当用到DELPHI自带的控件都感到少了一点什么，形状也好，颜色也好，变化的方式也好，都与自已的项目所需要的标准相差了一些，查阅了一些书籍后发现下面的控件很有可用之处！！！以下是它的源代码：unit DsFancyButton;interfaceuses  SysUtils,Windows, Messages, Classes, Graphics, Controls, Forms;type  TT
漂亮的自绘按钮
06-06
偶尔也需要自己造块砖 一个简单的自绘按钮例子 有时候简单的重绘一个现有的控件，就可以做出很棒的界面效果，不必去使用第三方控件uButtonEx.pas 是一个完整的组件，可单独安装 后面会继续放出各种自绘的小组件，效果很cool的哦
漂亮的按钮配色
热门推荐
光庆的学习笔记
09-14 1万+
#4CAF50; #008CBA #f44336 #e7e7e7 #555555
一个好看的CSS按钮样式
05-17
首先，CSS按钮样式通常包括以下几个方面： 1. **基本结构**：一个CSS按钮通常由HTML的`<button>`、`<input type="button">`或自定义`<div>`元素构建。在这个案例中，我们可能会看到一个使用`<div>`元素来模拟按钮的...
好看的WPF自定义按钮样式（绝对不亏）
09-30
在WPF中，自定义按钮样式通常涉及以下几个步骤： 1. **定义资源**：在XAML文件的根元素下创建`ResourceDictionary`，并在其中定义按钮的样式。这样可以方便地在整个应用程序中重用该样式。 2. **创建样式**：使用`...
50多个超漂亮水晶Button按钮样式大集合
05-12
内容索引:脚本资源,CSS特效,按钮,水晶按钮　50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能...
5个按钮的样式
03-19
标题"5个按钮的样式"暗示了这篇博客或资源可能涵盖了如何创建和定制五个不同风格的按钮。按钮作为交互设计的核心部分，其样式不仅影响着应用或网站的视觉效果，还对用户体验有着直接的影响。接下来，我们将深入探讨...
QT动态切换样式，几种好看的样式风格
05-28
例如，你可以为一个按钮设置两个不同的样式表，并在点击按钮时切换它们： ```cpp connect(styleSwitchButton, &QPushButton::clicked, this, [this]{ if (isStyle1) { setStyleSheet(styleSheet2); isStyle1 = ...
一组漂亮的css3按钮（各种颜色+样式）
12-13
纯css3，不支持ie8以下浏览器
Delphi图片按钮控件，很好用
03-31
PicButton控件，Delphi写的，使用起来非常简单，感觉比Rz的好用
36种漂亮的网页Button按钮样式
06-09
36种漂亮的网页Button按钮样式
多种好看的按钮
02-14
所上传的文件里面，有很多种labview的好看图标，直接复制使用
漂亮得按钮代码
03-16 760
.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, StartC
一个漂亮的颜色渐变的按钮
13号同学的博客
12-04 480
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; } html, body { height: 100%...
漂亮的圆形按钮.
wangyunyong0905的专栏
11-07 1447
unit BottR; interface uses   Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,   StdCtrls; type   TForm1 = class(TForm)     Button1: TButton;     procedure FormCreate(Sender
CSS3打造优雅响应式按钮样式教程
CSS部分则是设计的核心，主要关注以下几个关键知识点： 1. **全局样式**：设置了body、p、h1元素的基础样式，如字体大小、间距和链接颜色。`body`的背景色是淡灰色，链接默认颜色为深蓝色，鼠标悬停时下划线显示。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值