css3 3D按钮

最新推荐文章于 2022-08-21 10:12:15 发布
最新推荐文章于 2022-08-21 10:12:15 发布
阅读量371 收藏 1
点赞数
分类专栏： css3 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>css3 3D按钮</title>
  <style type="text/css">
body
{
font-family: ‘Open Sans’ , sans-serif;
background-image: url(blurred-background-images-photos-0322125813.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
h1
{
text-align: center;
}
p
{
margin: 1em;
padding: 1em;
text-align: center;
}
.s3-btn1, .s3-btn2, .s3-btn3, .s3-btn4, .s3-btn5, a.s3-btn1, a.s3-btn2, a.s3-btn3, a.s3-btn4, a.s3-btn5
{
outline: none;
text-decoration: none !important;
margin: 0 auto;
padding: 1em 3em;
border-radius: 5px;
-webkit-transition: all 100ms linear;
transition: all 100ms linear;
touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
text-align: center;
}
.s3-btn1
{
color: #ffffff;
background: -webkit-linear-gradient(top, #c03718 0%, #e44a27 100%);
background: linear-gradient(to bottombottom, #c03718 0%, #e44a27 100%);
border: 1px solid #a93115;
box-shadow: 0px 4px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn1:hover
{
background: -webkit-linear-gradient(top, #c03718 0%, #d73e1b 100%);
background: linear-gradient(to bottombottom, #c03718 0%, #d73e1b 100%);
}
.s3-btn1:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn2
{
color: #ffffff;
background: -webkit-linear-gradient(top, #6fbdbf 0%, #92cdcf 100%);
background: linear-gradient(to bottombottom, #6fbdbf 0%, #92cdcf 100%);
border: 1px solid #5db5b8;
box-shadow: 0px 4px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn2:hover
{
background: -webkit-linear-gradient(top, #6fbdbf 0%, #80c5c7 100%);
background: linear-gradient(to bottombottom, #6fbdbf 0%, #80c5c7 100%);
}
.s3-btn2:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn3
{
color: #ffffff;
background: -webkit-linear-gradient(top, #a8e427 0%, #baea54 100%);
background: linear-gradient(to bottombottom, #a8e427 0%, #baea54 100%);
border: 1px solid #9bd71a;
box-shadow: 0px 4px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn3:hover
{
background: -webkit-linear-gradient(top, #a8e427 0%, #b1e73d 100%);
background: linear-gradient(to bottombottom, #a8e427 0%, #b1e73d 100%);
}
.s3-btn3:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn4
{
color: #ffffff;
background: -webkit-linear-gradient(top, #70df9e 0%, #9ae8ba 100%);
background: linear-gradient(to bottombottom, #70df9e 0%, #9ae8ba 100%);
border: 1px solid #5cda8f;
box-shadow: 0px 4px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn4:hover
{
background: -webkit-linear-gradient(top, #70df9e 0%, #85e3ac 100%);
background: linear-gradient(to bottombottom, #70df9e 0%, #85e3ac 100%);
}
.s3-btn4:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn5
{
color: #ffffff;
background: -webkit-linear-gradient(top, #161616 0%, #2f2f2f 100%);
background: linear-gradient(to bottombottom, #161616 0%, #2f2f2f 100%);
border: 1px solid #090909;
box-shadow: 0px 4px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn5:hover
{
background: -webkit-linear-gradient(top, #161616 0%, #222222 100%);
background: linear-gradient(to bottombottom, #161616 0%, #222222 100%);
}
.s3-btn5:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
  </style>
 </head>
 <body>
  <h1>
<span class="font-effect-shadow-multiple" style="font-size: 50px; font-family: Luckiest Guy;">
CSS</span> <span class="font-effect-3d" style="font-size: 50px; font-family: Sonsie One;">
3D</span> <span class="font-effect-shadow-multiple" style="font-size: 50px; font-family: Luckiest Guy;">
Buttons</span>
</h1>
<p>
<a href="#" class="s3-btn s3-btn1">s3-btn1</a>
</p>
<p>
<a href="#" class="s3-btn s3-btn2">s3-btn2</a>
</p>
<p>
<a href="#" class="s3-btn s3-btn3">s3-btn3</a>
</p>
<p>
<a href="#" class="s3-btn s3-btn4">s3-btn4</a>
</p>
<p>
<a href="#" class="s3-btn s3-btn5">s3-btn5</a>
</p>
 </body>
</html>

啊哈前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透
weixin_35650041的博客
06-10 502
本文作者html5tricks，转载请注明出处接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码，总体而言，这款CSS3 3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代HTML代码：+–HTML代码很简单，我们可以看出每个checkbox下面均定义了2个span，通过对这两个span样式的定义，我们就可以模拟出checkbox选中的动画效果了。接下来是CSS代...
纯CSS3 3D按钮效果
12-13
【纯CSS3 3D按钮效果】是一种利用CSS3的新特性来实现的视觉效果，它在网页设计中常被用于创建具有立体感和交互性的按钮。CSS3是 Cascading Style Sheets（层叠样式表）的第三版，相较于CSS2，CSS3引入了许多新的功能...
CSS 3D按钮
W_ang_Y_i的博客
11-09 636
<div class="btn"> 3D按钮 </div> .btn { width: 150px; height: 50px; background-image: linear-gradient(to top, #D8D8D8 0%, #fff 80%, #FDFDFD 100%); border-radius: 30px; border: 1px solid #8F9092; box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8p.
利用css制作3D按钮
uiguiytuy的博客
11-03 2129
利用css制作3D按钮 <p class="button"><b>按这里</b></p> 用一个块元素制作按钮主体，用一个行内元素制作按钮上显示的字 接着书写样式。 .button{width:150px; height:150px; background: #ffff00; 按钮大小和颜色可以按照自己喜好。 border-radius:...
css3之3D按钮的实现
舒小罗
07-14 666
一、思路 （1）将按钮的样式分为两部分：变化前和变化后 （2）分别用伪元素::after和::before分别来展示变化前和变化后的样式 （3）变化前，需要显示的部分是::after伪元素中的样式(transform:rotateX(0deg) translateY(0%)),则需要将::before伪元素的样式隐藏(transform:rotateX(90deg) translateY(-50%) （4）变化后，需要显示的是::before伪元素中的样式(transform:rotateX(0deg) t
纯CSS实现3D按钮效果
lumot的博客
09-16 1447
今天分享一个用纯CSS实现的3D按钮。 css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。 让人感觉有一种按钮被按下的感觉。css代码...
纯CSS3制作按钮3D翻转效果
qq_44771388的博客
12-30 496
3D按钮翻转 具体效果 那么我们开始制作3D按钮翻转效果 我们先把html的结构写一下 <body> <ul> <li> <div class="zheng">首页</div> </li> <li> <div class="zheng">登录</div> </li>
css动画 绘制3d立体按钮
weixin_43294560的博客
06-19 537
做法: 在设置好平面div后,利用其前后伪类,定位到左边和下边, 分别设置左边向上倾斜,下面像左倾斜,最后设置整个平面倾斜增加立体感 代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./index.css"> <style> .bo
php3d按钮,7款外观迷人的HTML5/CSS3 3D按钮特效
weixin_28832121的博客
03-13 107
7款外观迷人的HTML5/CSS3 3D按钮特效之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮，它在鼠标按下时不仅从视觉上感受到3D立体的效果，而且更有弹性的动画特效，非常可爱。1、CSS3超酷3D弹性按钮 按钮实现非常简单2、新款CSS3按钮组合 5组可爱CSS3按钮之...
css立体3d按钮样式
ICode联盟
08-21 217
css立体3d按钮样式，点击会变。
CSS 3D按钮特效
weixin_41886734的博客
08-01 164
1、https://www.webhek.com/post/css-3d-button.html 2、https://www.html5tricks.com/7-html5-css3-button.html 3、https://www.runoob.com/try/try.php?filename=trycss_buttons_animate3
css3实现3d凹凸按钮特效代码
03-20
你可以根据自己的需求调整颜色、大小、角度和过渡效果，以创造出符合网站风格的个性化3D按钮。同时，这个例子也展示了CSS3的强大功能，如何仅用CSS就能创建出复杂的视觉效果，而无需依赖JavaScript或者图片。通过...
纯CSS3按钮3D效果
06-24
创建3D按钮的基本步骤如下： 1. **HTML结构**：首先，我们需要一个HTML按钮元素，例如`<button>`或`<a>`标签，并为其设置一个唯一的ID，以便于我们在CSS中引用。 ```html 点击我 ``` 2. **基础样式**：接着，我们...
纯CSS实现3D按钮效果实例代码
09-24
以下是一个基本的3D按钮的CSS样式定义： ```css a.css-3d-btn { position: relative; color: rgba(255, 255, 255, 1); text-decoration: none; background-color: rgba(219, 87, 51, 1); font-family: ...
纯CSS3实现简易3D按钮特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3来创建一个简易的3D按钮特效。CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它引入了许多新特性，其中包括2D和3D转换、动画以及更丰富的选择器，这使得我们可以创建...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
最新发布
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
振中TP900 驱动工具2.2
08-05
振中TP900 驱动工具2.2
用CSS代码输出一个3D按钮
05-31
好的，以下是一段CSS代码可以实现一个简单的3D按钮效果： ```css .button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; box-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值