比较好看的css按钮

最新推荐文章于 2023-10-24 11:22:35 发布
最新推荐文章于 2023-10-24 11:22:35 发布
阅读量455 收藏
点赞数
分类专栏： html和css学习 文章标签： CSS Microsoft HTML

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个比较好看的Button的CSS-chinaz.com</title>
</head>

<body>

<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: #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>

<button class=btn title="CSS样式按钮\">CSS样式按钮</button><P></p>
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'"
title="CSS样式按钮">CSS样式按钮</button>  
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
<P>
<button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn3_mouseout ōnmouseover="this.className='btn3_mouseover'"
οnmοuseοut="this.className='btn3_mouseout'"
οnmοusedοwn="this.className='btn3_mousedown'"
  ōnmouseup="this.className='btn3_mouseup'"
  title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>

</html>

xinlingwuyu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个好看的CSS按钮样式
05-17
一个好看的CSS按钮样式
92款超级漂亮的css按钮样式 复制即用
十一月廿七风雨大作
01-10 9962
样式如图，代码已在结尾，按照序号复制粘贴便可直接用了：代码：
36种漂亮的CSS3网页按钮Button样式
Alex 的程序园地
02-27 2万+
36种漂亮的CSS3网页按钮Button样式 body{  background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0; } .button{ width: 140px; line-height: 38px; text-align: center; font-weight: bold; colo
几个实用又好看的纯css 按钮样式
qq_43682422的博客
08-04 2万+
几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;
分享几个精美的网页按钮样式，纯CSS实现，无JS（拿来即用）
最新发布
Z_B_L的博客
10-24 262
点击按钮： 效果：凹陷效果： 效果：开关按钮： 效果：谢谢大家观看，T________T
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
weixin_39889544的博客
11-28 843
写在前面最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。亮起来按钮<简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个...
10个好看的css按钮源码.rar
01-28
10个好看的css按钮源码
十六个好看的css3按钮
05-31
十六个好看的css3按钮
好看的CSS按钮(兼容IE6)
05-31
好看的CSS按钮(兼容IE6)好看的CSS按钮(兼容IE6)
纯CSS3按钮3D效果
06-24
纯CSS3按钮3D效果，在鼠标点击按钮时，按钮会有下凹的视觉效果，非常好看。
好看的button样式CSS
09-01
好看的button样式CSS,你值得下载，
50个漂亮的css按钮
03-02
50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮
Web前端——用CSS的常用样式制作一个炫酷的按钮
qq_53715074的博客
11-18 3910
border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right。background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复。Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的 右下⻆ 右上⻆ 左上⻆ 这⾥不再赘述。精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x： 显示横向滑动条。
【HTML5+CSS】美观的button设置
只识闲人不识君博客
04-18 2万+
一、 首先我们要创建一个button按钮，如我们所知，没有经过设置的按钮比较不美观。如图所示 **二、**例子1 如果我们想要将它变得好看一些，就需要对它进行设置。 以华为官网注册的按钮为例： 首先它是红色，当点击会有悬停变色。而且我们需要进行设置宽高，字体颜色，背景颜色。 button{ background-color:#f66f6a; co...
css按钮样式
hzp666的博客
04-05 3万+
创建漂亮的 CSS 按钮的 10 个代码片段 IT程序狮子烨 1 个月前 如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。 网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3
分享10款漂亮的 CSS 按钮源码
web前端开发
08-21 2万+
翻译| web前端开发英文原文 |https://1stwebdesigner.com/free-code-snippets-css-buttons/网页设计师已经不...
3种简单又好看的·按钮效果
英雄不问出处
10-23 1625
在B站看到了几个好看的按钮特效，分享给大家。 第一个 样品展示 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按钮·彩色</title> <style type="text/css"> ...
【前端系列】36种button样式
热门推荐
檀越的博客
11-17 4万+
3.button 种类 "Button"可以指多种不同类型的按钮，以下是其中的一些：以下是一些 HTML 中设置按钮样式的常用方法：1.使用 CSS 样式表：可以通过 CSS 样式表来设置按钮的外观，例如设置按钮的背景色、字体颜色、边框等。 2.使用内联样式：可以在按钮标签中使用 style 属性来设置按钮的样式。 3.使用类名：可以为按钮设置一个类名，然后在 CSS 样式表中设置该类名的样式。 觉得有用的话点个赞 呗。
36种漂亮的CSS3网页按钮Button样式 - 改进版
Rudon滨海渔村的博客
03-14 2701
效果图 源代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="...
生产一个好看的按钮css
08-05
要生产一个好看的按钮CSS，可以考虑以下几个要素： 1. 背景颜色和渐变：选择一个适合按钮风格的背景颜色，可以使用CSS的渐变属性，让按钮看起来更加丰富多彩。 2. 边框和阴影：通过设置合适的边框样式和阴影效果，使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值