php3d按钮,CSS实现3D按钮效果

这次给大家带来CSS实现3D按钮效果，CSS实现3D按钮效果的注意事项有哪些，下面就是实战案例，一起来看一下。

css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。

让人感觉有一种按钮被按下的感觉。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: "Microsoft YaHei", 微软雅黑, 宋体;

font-weight: 700;

font-size: 3em;

display: block;

padding: 4px;

border-radius: 8px;

/* let's use box shadows to make the button look more 3-dimensional */

box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);

margin: 100px auto;

width: 160px;

text-align: center;

-webkit-transition: all .1s ease;

-moz-transition: all .1s ease;

transition: all .1s ease;

}

/* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */

a.css-3d-btn:active{

box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);

position: relative;

top: 6px;

}

效果如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php3d按钮,CSS实现3D按钮效果相关推荐

php3d按钮,css3实现3D按钮效果的文章推荐
使用css3代码来制作3D按钮效果,这是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各非常不错,因为很多效果在PS中制作是容易,特别对于设计师来说更容易,但对于一名cod ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
css书本效果,如何使用纯CSS实现3D书本效果
如何使用纯CSS实现3D书本效果发布时间:2020-07-30 10:27:15 来源:亿速云阅读:59 作者:Leah 这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果,文章内 ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...
html制作3d按钮,纯CSS3 3D按钮按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
HTML自动暂停按钮,css播放暂停按钮实现_html/css_WEB-ITnose
效果图 html代码 //播放按钮 //暂停按钮 ▐▐//重置按钮 css .circle {border: solid 1px #23527C;border-radius: 50px;height: ...
自学篇之--js 提取复选框和单选框的值和纯css的3D按钮
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="utf-8" co ...
HTML+CSS做出3D照片效果（HTML+CSS for 3D photo effect）
2022.10.14大家好,我最近看到一个关于用HTML+CSS实现的3D照片觉得非常好看,如图: Hello everyone, I recently saw a 3D photo about us ...

php3d按钮,CSS实现3D按钮效果

php3d按钮,CSS实现3D按钮效果相关推荐

最新文章

热门文章