原文地址:https://segmentfault.com/a/1190000014599280

HTML代码:

<div class="box">BUTTON</div>

css代码:

/* 内容居中*/
html, body {
/* 使body继承HTML的高度 ,否则box是不能垂直居中*/
height: 100%;
margin:;
padding:;
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
}
/*设置按钮的 2d 样式,为了便于调整按钮尺寸,使用了变量*/
.box{
background:linear-gradient(to right,gold,darkorange);
color:white;
--width:250px;
--height:calc(var(--width)/3);
width:var(--width);
height:var(--height);
text-align: center;
line-height: var(--height);
font-size:cal(var(--height)/2.5);
font-family:sans-serif;
letter-spacing:0.2em;
border:1px solid darkgoldenrod;
border-radius:2em;
/*设置按钮的 3d 样式*/
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
transition: 0.5s;
position: relative;
overflow: hidden;
}
/* 定义按钮的鼠标划过动画效果 */
.box:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}
/* 用伪元素增加光泽 */
.box::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, white, transparent);
left: -100%;
transition: 0.5s;
}
.box:hover::before {
left: 100%;
}

4. 纯 CSS 创作一个金属光泽 3D 按钮特效的更多相关文章

  1. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  2. 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  5. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  6. 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...

  7. 如何用纯 CSS 创作一个容器厚条纹边框特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...

  8. 如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...

  9. 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

随机推荐

  1. Maze dfs倒行

    Pavel loves grid mazes. A grid maze is an n × m rectangle maze where each cell is either empty, or i ...

  2. 《DSP using MATLAB》Problem 3.4

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  3. JQuery实时监控文本框字符变化

    $(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...

  4. 【MVC】View与Control之间数据传递

    1. Controller向View传递数据 使用ViewData传递数据[弱类型,字典型ViewDataDictionary] ViewData[“Message_ViewData”] = “ He ...

  5. gitlab操作

    一.初始设置 在某一个具体的project下: 1.gitlab中删除一个工程Setting-->General-->Advanced settings-->RemoveProjec ...

  6. 使用jsonp进行跨站点数据访问

    使用jsonp 可以解决ajax 的跨域问题,使用起来比较简单. 具体的测试环境搭建如下 1.一个简单的MVC 站点 2.一个简单的html文件(这次的测试是在web 站点中,当然可以是一个简单的ht ...

  7. Zxing图片拉伸解决 Android 二维码扫描

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/aaawqqq/article/details/24852915  二维码扫描  Android Zx ...

  8. mysql 事务隔离级别详解

    事物的 隔离级别,说简单非常简单(新手也能说出 是个隔离级别 和 影响),说男也非常难.(很多 有几年编程 经验的程序员依旧搞不清楚) 废话不多少 直接开始: 事务的隔离级别 是用来描述 事务的读关系 ...

  9. Nginx隐藏主机信息,proxy_hide_header 与fastcgi_hide_header

    Nginx中proxy_hide_header 与fastcgi_hide_header都可以隐藏主机头信息,两者在具体使用时还是有着一定的区别的.刚好业务使用的nginx反向代理在显示响应头时将后端 ...

  10. shell获取目录下所有文件夹的名称并输出

    获取指定目录/usr/下所有文件夹的名称并输出: shell代码: #!/bin/bash #方法一 dir=$(ls -l /usr/ |awk '/^d/ {print $NF}') for i ...