好看的按钮代码

最新推荐文章于 2023-01-10 21:05:30 发布
最新推荐文章于 2023-01-10 21:05:30 发布
阅读量342 收藏 1
点赞数
分类专栏： 网页/JS 文章标签： Microsoft QQ XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ritaleo/article/details/83265585
版权 
<!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>好看的按钮</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: #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>
<button class=btn> 好看的CSDN Button</button><Br />
<button class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"οnmοuseοut="this.className='btn1_mouseout'"> 好看的Green Button</button><Br />
<button class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"οnmοuseοut="this.className='btn1_mouseout'" DISABLED> 好看的Green Button</button><Br />
<button class=btn2> 好看的 e商2003 Button</button><Br />
<button class=btn3_mouseout οnmοuseοver="this.className='btn3_mouseover'" οnmοuseοut="this.className='btn3_mouseout'"οnmοusedοwn="this.className='btn3_mousedown'"
οnmοuseup="this.className='btn3_mouseup'"> 好看的QQ Button</button><Br />
<button class=btn_2k3> 好看的 2k3 Button</button>
</body>
</html>

 

_大树_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
好看的CSS3网页3D按钮特效代码
06-11
总结来说，制作一个好看的CSS3网页3D按钮特效，需要熟练掌握和运用CSS3的3D转换、过渡效果、阴影、边框半径以及背景属性。通过精心调整这些属性，我们可以创建出具有高度交互性和视觉吸引力的网页元素，提升用户体验...
Android按钮美化样式的实现代码
01-05
话不多说，上运行效果图 在drawable文件夹下 新建button_drawable.xml <?xml version=1.0 encoding=utf-8 ?> <...--相当于做了一张圆角的图片,然后给button作为背景图片-->...corners and
按钮卡片特效代码集锦
qq_50594742的博客
10-19 667
css最好看最全的按钮卡片样式，动画效果大全，纯css样式打造的20款按钮特效和11款卡片合集，喜欢的可以收藏，备开发时使用。
❤ ❤分享一个超好看的按钮点击唯美发光炫彩按钮❤ ❤
yingshuangtu的博客
06-21 1085
文章目录前言一、实现效果二、代码总结 前言 分享一个超级无敌好看的唯美按钮，动态 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现效果 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 炫彩按钮.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
92款超级漂亮的css按钮样式 复制即用
十一月廿七风雨大作
01-10 1万+
样式如图，代码已在结尾，按照序号复制粘贴便可直接用了：代码：
好看的button
qq_42316056的博客
11-30 409
B站学习到的一个好看按钮案例
36种漂亮的CSS3网页按钮Button样式 - 改进版
Rudon滨海渔村的博客
03-14 2925
效果图 源代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="...
好看的按钮代码——网页编程！
04-01
Html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ... <html xmlns="http://www.w3.org/1999/xhtml"> <head> ; charset=gb2312" /> 好看的按钮</title> <style> .btn {
Android自定义实现开关按钮代码
09-02
经常可以看到一些选择开个状态的配置文件，但是外观都不多好看。我感觉还是自定义的比较好，下面小编给大家介绍通过Android自定义实现开关按钮代码，感兴趣的童鞋一起学习吧
多种好看的按钮
02-14
在给定的标题“多种好看的按钮”和描述“所上传的文件里面，有很多种LabVIEW的好看图标，直接复制使用”中，我们可以理解这个压缩包包含了一些设计精美的LabVIEW界面元素，特别是用于创建用户界面（UI）的按钮图标。...
36种漂亮的CSS3网页按钮Button样式
03-18
内含36种 button的界面效果，纯css3制作，需要的拿去，分享是第一美德！
50多个超漂亮水晶Button按钮样式大集合
07-22
50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能用得上，或许你现在用不上，但下载收藏起来，日后用起来方便多了。
好看的button样式CSS
09-01
好看的button样式CSS,你值得下载，
VC 制作漂亮的按钮效果（控件类）代码.rar
07-10
VC 实现按钮的美化效果，制作一些漂亮的按钮效果，这是一个美化按钮风格的控件类代码，并附有使用方法和效果演示，从演示效果可看作，可实现一些带气泡提示、各种形状、使用图标的按钮，可满足你个性化的需求。
css文本框与按钮美化效果代码
10-30
CSS表单美化之文本框与按钮一例
好看的按钮集合HTML + CSS各种好看按钮组件
技匠而已
04-03 2650
展示效果 [注意:]并不是单纯的效果，而是有动画的 话不多说 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Animation Buttons</h1> <p>Hover us and enjoy the s
几款好看的HTML按钮样式
热门推荐
wcqlwyt的博客
06-14 7万+
给大家介绍几款好看的HTML按钮样式 按钮样式一: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
创建漂亮的 CSS 按钮的 10 个代码片段
enterlind的博客
03-08 1610
如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。 网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。 1. Plastic Butt
各种好看的按钮PSD源文件
02-12
5. **整合到项目中**：将编辑后的按钮导出为适合Web的格式（如PNG、SVG或CSS），然后在HTML/CSS代码中引用，或将它们嵌入到其他设计软件中，如Sketch或Figma。 这些按钮PSD素材对于初学者和经验丰富的设计师都极具...
帮我写一个好看的按钮html代码
最新发布
02-22
;border:none;color:white;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;">这是一个好看的按钮</button>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值