用CSS实现的几个非常漂亮的按钮

最新推荐文章于 2024-06-24 10:48:58 发布
最新推荐文章于 2024-06-24 10:48:58 发布
阅读量1k 收藏
点赞数
分类专栏： CSS/HTML/JAVASCRIPT 文章标签： css filter class c button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phoebird/article/details/3890921
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现的几个非常漂亮的按钮</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 title="好看的按钮">好看的按钮</button><p> </p>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button> 
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</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'"
title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的按钮</button>
</body>
</html>

phoebird
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超漂亮的CSS 按钮 button
10-05
超漂亮的CSS 按钮 button
一组漂亮的css3按钮（各种颜色+样式）
12-13
纯css3，不支持ie8以下浏览器
纯CSS实现beautiful按钮
wang_yu_shun的博客
08-22 261
大家好，我是前端点线面，一位新生代农民工，欢迎关注我获取最新前端知识和 《前端百题斩》pdf版(内容包括JS基础篇、浏览器篇、网络篇，共计50个章节，5万多字)近期工作中遇到一个需求——实...
CSS 轻松实现常见各类奇形怪状按钮
最新发布
柑橘乌云_
06-24 948
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
CSS实现的几个非常漂亮的按钮
空中花园
08-06 403
文章来源:站酷www.zcool.com    html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>CSS实现的几个非常漂亮的按钮title>style>.btn {BORDER-RIGHT: #7b9ebd 1px solid;
CSS好看的按钮
weixin_34107955的博客
04-03 83
好看的按钮 &lt;style&gt; .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradi...
CSS实现的几个非常漂亮的按钮.rar
07-05
这个“CSS实现的几个非常漂亮的按钮.rar”压缩包中，很显然包含了利用CSS创建各种美观、吸引用户的按钮的示例代码。这些按钮不仅提升了用户体验，也对网页的整体视觉效果起到了关键作用。下面我们将深入探讨如何利用...
纯CSS3实现动画开关按钮特效.zip
07-11
在CSS3中，实现这种开关按钮特效的关键技术主要包括以下几点： 1. **伪类选择器**：CSS3的`:checked`伪类可以用来检测复选框或单选按钮的状态。当用户点击开关按钮时，对应的隐藏复选框会被选中或取消，从而触发...
CSS3实现创意开关切换按钮特效代码
03-20
首先，要理解这个开关按钮的实现原理，主要涉及到以下几个CSS3关键知识点： 1. **伪类选择器**：CSS3引入了更多的伪类选择器，如`:checked`，它用于选中`<input type="checkbox">`或`<input type="radio">`时，可以...
CSS做的漂亮按钮
leeight的专栏
07-09 1404
.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, St
36种漂亮的CSS3网页按钮Button样式
03-18
内含36种 button的界面效果，纯css3制作，需要的拿去，分享是第一美德！
50个漂亮的css按钮
03-02
50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮
CSS实现的几个非常好看的按钮
06-22
CSS实现的几个非常好看的按钮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
漂亮简洁的css开关样式
12-12
一个漂亮简洁的css开关样式，<input type="checkbox" value="1" name="check" class="lcs_check" 'checked';> autocomplete="off"/>
js和css做的很漂亮的提交按钮
11-13
js和css做的很漂亮的提交按钮,一改以往html中老套的按钮模式，可以自己选颜色，非常漂亮，里面已经有js和css文件里，用户可以直接拷到工程中用
css样式制作的漂亮按钮
weixin_33813128的博客
01-28 139
2019独角兽企业重金招聘Python工程师标准>>> ...
纯css实现的一些好看的按钮
2301_79265530的博客
10-26 566
【代码】纯css实现的一些好看的按钮。
纯css实现好看的按钮样式
前端程序猿的博客
10-25 449
【代码】纯css实现好看的按钮样式。
用css写一个炫酷的登录按钮
08-10
### 回答1： 当然可以！以下是一个用 CSS 制作的炫酷登录按钮的示例代码： ```html <button class="btn btn-1">登录</button> ``` ```css .btn { font-size: 16px; color: #fff; text-transform: uppercase; text-decoration: none; background: #6C63FF; padding: 10px 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; cursor: pointer; margin: 5px; } .btn:hover { background: #483D8B; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; } ``` 在这个示例中，我们创建了一个带有“登录”文本的按钮。该按钮有一个默认样式 `.btn`，它定义了字体大小、颜色、背景、填充、边框、边框半径、光标类型和过渡效果等属性。此外，我们定义了一个悬停状态 `.btn:hover`，当鼠标指针悬停在按钮上时，背景颜色会变成紫罗兰色，并添加阴影和字母间距的过渡效果，使按钮看起来更加炫酷。 您可以根据自己的需求进行更改和自定义，创建出更加炫酷的登录按钮。 ### 回答2： 要用CSS写一个炫酷的登录按钮，可以考虑以下几个方面的设计： 1. 按钮样式：可以选用渐变背景色、阴影效果、圆角边框等元素来增加按钮的炫酷感。例如，设置背景颜色为渐变，可以使用“background-image: linear-gradient(to right, #ff9a9e, #fad0c4);”来实现。 2. 悬浮效果：当鼠标悬浮在按钮上时，可以添加一些动画效果，如改变背景颜色、添加阴影或放大按钮的大小等。可以使用:hover伪类实现，例如“button:hover { background-color: #ff6384; }”。 3. 按钮图标：可以在按钮上添加一个图标，如登录图标或用户图标，增加按钮的可视化效果。可以使用Font Awesome等图标库，或使用自定义背景图来实现。例如，“background-image: url('login.png'); background-position: center; background-repeat: no-repeat;”。 4. 过渡效果：可以为按钮设置渐变过渡效果，使按钮的颜色或大小在状态变化时平滑地过渡。可以使用transition属性来实现，例如“transition: background-color 0.3s ease;”。 5. 响应式设计：确保按钮在不同屏幕大小或设备上能够良好地适应，并保持炫酷的外观。可以使用@media查询来控制不同屏幕下的样式，例如“@media (max-width: 768px) { ... }”。 综上所述，可以根据以上设计原则，使用CSS样式实现一个炫酷的登录按钮。 ### 回答3： 要用CSS写一个炫酷的登录按钮，可以遵循以下步骤： 1. 创建按钮的HTML元素，可以使用<button>标签，并在其中添加登录文本。 2. 使用CSS样式来为按钮添加炫酷的效果。可以通过设置背景颜色、边框样式和颜色来增加按钮的视觉效果。例如，可以设置按钮的背景颜色为渐变色，可以使用linear-gradient()函数来实现。同时，可以为按钮添加阴影效果，可以使用box-shadow属性来设置。 3. 调整按钮的大小和形状。可以通过设置按钮的宽度和高度，使用border-radius属性来调整按钮的圆角形状，使其看起来更加炫酷。 4. 添加过渡效果。可以使用transition属性来为按钮添加过渡效果，使鼠标悬停时按钮的样式发生平滑的变化，增加交互性和用户体验。 5. 可以为按钮添加动画效果。例如，可以使用@keyframes和animation属性来创建一个旋转特效，使按钮在点击时以动画的形式旋转。 总之，通过合理运用CSS的样式和动画效果，我们可以为登录按钮添加各种炫酷的视觉效果，提升页面的用户体验和视觉吸引力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值