几个漂亮的Button的CSS

最新推荐文章于 2024-06-24 10:48:58 发布
最新推荐文章于 2024-06-24 10:48:58 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdfjhc/article/details/83820039
版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               
       
 
<span id="ArticleContent1_ArticleContent1_lblContent"><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> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
 οnmοuseοut="this.className='btn1_mouseout'"
> 好看的Green Button</button>  &nbsp;
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
 οnmοuseοut="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2> 好看的 e商2003 Button</button>
<P>
<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>
<P>
<button class=btn_2k3> 好看的 2k3 Button</button>
</body></span>
           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
这里写图片描述
运真表姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 的快乐：画一个可爱的三只小鸟 Button
sybh的博客
11-28 2347
我们通过纯 CSS 实现了一个可爱的 Button，核心就是用元素 + 伪元素通过 flex + 定位来布局，然后通过 border-radius + clip-path 设置形状，通过 animation + @keyframes 来做复杂的动画，通过 transition 设置过渡效果。border-radius 可以设置 4 个角的横竖半轴的长度，从而做出很多形状，更复杂的不规则形状可以通过 clip-path 来裁剪出来。
好看的button样式CSS
09-01
"好看的button样式CSS"这一主题涉及到以下几个关键知识点： 1. **基本样式设置**：使用`display: inline-block`属性将按钮设置为块级元素，以便占据整行宽度；`padding`属性可以调整内部间距，`font-size`定义字体...
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
CSS 轻松实现常见各类奇形怪状按钮
柑橘乌云_
06-24 844
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
几个实用又好看的纯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动画库
weixin_50367873的博客
12-09 2万+
css动画合集
前端 几个好看的button
Wantfly9951的博客
03-25 798
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>漂亮的CSS3圆角按钮组合DEMO演示</title> <style type="text/css"> .demo{width:760px; margin:20px auto 0 auto; height:70px;} .button { display: inline-block; outline:
纯CSS实现几个好看的按钮
编码揭秘的专栏
05-17 1万+
1. 鼠标悬停 .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-tra
几个漂亮的CSS做的Button
你是自己设计的产品
05-10 1154
.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, StartCo
css设置滚动条的几个属性
帥潔的博客
05-17 4927
设置滚动条的七个属性 1、::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 2、::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 3、::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 4、::-webkit-scrollba
CSS实现三个button分别居左、居中、居右
hober的专栏
11-17 3万+
上层div使用text-align：center 左右button分别使用float属性 案例（忽视bootstrap的class） <div style="text-align: center;"> <button style="float: left;" class="btn btn-primary">Left Button</button>...
50个CSS超炫丽button样式
06-30
本资源集合了"50个CSS超炫丽button样式"，旨在展示CSS的灵活性和创新性，帮助开发者和设计师们激发灵感，提升网页界面的吸引力。 这些CSS按钮样式各具特色，涵盖了不同的设计风格，包括但不限于以下几点： 1. **...
CSS实现的几个非常漂亮的按钮
11-12
CSS实现的几个非常漂亮的按钮CSS实现的几个非常漂亮的按钮
收集几款漂亮的CSS3按钮美化例子.rar
07-10
【描述】中提到的几个关键点： 1. **背景渐变**：CSS3引入了线性渐变和径向渐变，允许我们为按钮创建丰富的背景效果，例如从一种颜色平滑过渡到另一种颜色，增强按钮的层次感和立体感。 2. **圆角按钮**：CSS3的`...
50多个超漂亮水晶Button按钮样式大集合
05-12
内容索引:脚本资源,CSS特效,按钮,水晶按钮　50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
el-button css
08-05
2. 使用 class 名称：为 el-button 添加一个自定义的 class 名称，并在 CSS 中定义该 class 的样式，例如： ```html<el-button class="my-button">按钮</el-button> ``` ```css.my-button { background-color: red;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值