扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS3如何实现白色质感3D按钮特效
  • 457

0
分享到

CSS3如何实现白色质感3D按钮特效

2024-04-02 19:04:59 457人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关css3如何实现白色质感3D按钮特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 　　使用方法 　　html结构 　　<div class

这篇文章给大家分享的是有关css3如何实现白色质感3D按钮特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

　　使用方法

　　html结构

　　<div class="grid">

　　<button><span>NORMal</span></button>

　　<button></button>

　　<button class="icon">

　　<svg width="626" height="512" viewBox="0 0 626 512" xmlns=

　　<path fill="currentColor" d="M64 166Q115 115 180 89 244 63 313 63 382 63 447 89 511 115 562 166L528 200Q484 156 429 134 373 111 313 111 253 111 197 134 141 156 98 200L64 166ZM132 234Q169 197 216 178 263 159 313 159 363 159 410 178 457 197 494 234L460 268Q430 238 392 223 354 207 313 207 272 207 234 223 195 238 166 268L132 234ZM200 302Q223 279 252 267 281 255 313 255 345 255 374 267 403 279 426 302L392 335Q376 319 355 311 334 303 313 303 291 303 271 311 250 319 234 335L200 302ZM267 369Q287 351 313 351 339 351 358 369L313 415 267 369Z"></path>

　　</svg>

　　</button>

　　<div class="button" role="button"><span>Not focusable</span></div>

　　<div class="button" role="button"></div>

　　<div class="button icon" role="button">

　　<svg width="626" height="512" viewBox="0 0 626 512" xmlns=

　　<path fill="currentColor" d="M64 166Q115 115 180 89 244 63 313 63 382 63 447 89 511 115 562 166L528 200Q484 156 429 134 373 111 313 111 253 111 197 134 141 156 98 200L64 166ZM132 234Q169 197 216 178 263 159 313 159 363 159 410 178 457 197 494 234L460 268Q430 238 392 223 354 207 313 207 272 207 234 223 195 238 166 268L132 234ZM200 302Q223 279 252 267 281 255 313 255 345 255 374 267 403 279 426 302L392 335Q376 319 355 311 334 303 313 303 291 303 271 311 250 319 234 335L200 302ZM267 369Q287 351 313 351 339 351 358 369L313 415 267 369Z"></path>

　　</svg>

　　</div>

　　<button disabled="disabled"><span>Disabled</span></button>

　　<button disabled="disabled"></button>

　　<button class="icon" disabled="disabled">

　　<svg width="626" height="512" viewBox="0 0 626 512" xmlns=

　　<path fill="currentColor" d="M64 166Q115 115 180 89 244 63 313 63 382 63 447 89 511 115 562 166L528 200Q484 156 429 134 373 111 313 111 253 111 197 134 141 156 98 200L64 166ZM132 234Q169 197 216 178 263 159 313 159 363 159 410 178 457 197 494 234L460 268Q430 238 392 223 354 207 313 207 272 207 234 223 195 238 166 268L132 234ZM200 302Q223 279 252 267 281 255 313 255 345 255 374 267 403 279 426 302L392 335Q376 319 355 311 334 303 313 303 291 303 271 311 250 319 234 335L200 302ZM267 369Q287 351 313 351 339 351 358 369L313 415 267 369Z"></path>

　　</svg>

　　</button>

　　</div>

　　CSS样式

　　{

　　from {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 10px 0px rgba(0, 0, 250, 0.6);

　　}

　　to {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;

　　}

　　}

　　@keyframes active {

　　from {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 10px 0px rgba(0, 0, 250, 0.6);

　　}

　　to {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;

　　}

　　}

　　*,

　　*:before,

　　*:after {

　　box-sizing: border-box;

　　}

　　body {

　　margin: 0;

　　padding: 30px;

　　background: #f8f8f8;

　　min-height: 100vh;

　　display: flex;

　　align-items: center;

　　justify-content: center;

　　}

　　.grid {

　　max-width: 400px;

　　margin: 50px auto;

　　display: grid;

　　grid-template-columns: 150px 150px 50px;

　　align-items: center;

　　justify-content: center;

　　grid-gap: 40px 25px;

　　}

　　button,

　　[role="button"] {

　　-WEBkit-appearance: none;

　　-webkit-user-select: none;

　　-moz-user-select: none;

　　-ms-user-select: none;

　　user-select: none;

　　display: flex;

　　align-items: center;

　　justify-content: center;

　　outline: none;

　　cursor: pointer;

　　width: 150px;

　　height: 50px;

　　background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);

　　border-radius: 30px;

　　border: 1px solid #8F9092;

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 0 #CECFD1;

　　transition: all 0.2s ease;

　　font-family: "Source Sans Pro", sans-serif;

　　font-size: 14px;

　　font-weight: 600;

　　color: #606060;

　　text-shadow: 0 1px #fff;

　　}

　　button::-moz-focus-inner,

　　[role="button"]::-moz-focus-inner {

　　border: 0;

　　}

　　button > *,

　　[role="button"] > * {

　　transition: -webkit-transform 0.2s ease;

　　transition: transform 0.2s ease;

　　transition: transform 0.2s ease, -webkit-transform 0.2s ease;

　　}

　　button:hover:not([disabled]),

　　[role="button"]:hover:not([disabled]) {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;

　　}

　　button:hover:not([disabled]) > *,

　　[role="button"]:hover:not([disabled]) > * {

　　-webkit-transform: scale(0.975);

　　transform: scale(0.975);

　　}

　　button:focus:not(:active),

　　[role="button"]:focus:not(:active) {

　　-webkit-animation: active 0.9s alternate infinite;

　　animation: active 0.9s alternate infinite;

　　outline: none;

　　}

　　button:active:not([disabled]),

　　[role="button"]:active:not([disabled]) {

　　box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;

　　}

　　button:active:not([disabled]) > *,

　　[role="button"]:active:not([disabled]) > * {

　　-webkit-transform: scale(0.95);

　　transform: scale(0.95);

　　}

　　button:disabled,

　　[role="button"]:disabled {

　　opacity: 0.6;

　　cursor: not-allowed;

　　}

　　button.icon,

　　[role="button"].icon {

　　width: 50px;

　　}

　　button.icon svg,

　　[role="button"].icon svg {

　　margin-top: 3px;

　　width: 30px;

　　height: 30px;

　　}

感谢各位的阅读！关于“CSS3如何实现白色质感3D按钮特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: CSS3如何实现白色质感3D按钮特效

本文链接: https://lsjlt.com/news/92339.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS3如何实现白色质感3D按钮特效
    这篇文章给大家分享的是有关CSS3如何实现白色质感3D按钮特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 　　使用方法 　　HTML结构 　　<div class...
    99+
    2024-04-02
  • css3如何3D色子翻转特效
    这篇文章主要讲解了“css3如何3D色子翻转特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3如何3D色子翻转特效”吧！第一步，首先进行HTML的布...
    99+
    2024-04-02
  • css3怎么实现3D色子翻转特效
    本篇内容主要讲解“css3怎么实现3D色子翻转特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3怎么实现3D色子翻转特效”吧!css3使我们能够跳出2d...
    99+
    2024-04-02
  • 如何使用纯CSS实现3D按钮效果
    小编给大家分享一下如何使用纯CSS实现3D按钮效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css巧妙利用了box-shadow来实现3D物体的立体感，当按钮...
    99+
    2023-06-08
  • 如何使用CSS3实现按钮悬停闪烁动态特效
    本篇内容介绍了“如何使用CSS3实现按钮悬停闪烁动态特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们...
    99+
    2024-04-02
  • 怎么用css3实现鼠标经过按钮特效
    这篇文章主要讲解了“怎么用css3实现鼠标经过按钮特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用css3实现鼠标经过按钮特效”吧！　　今天再给大家...
    99+
    2024-04-02
  • 怎么用CSS3实现按钮边框动画特效
    本篇内容主要讲解“怎么用CSS3实现按钮边框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现按钮边框动画特效”吧!这是一款效果非常炫酷的...
    99+
    2024-04-02
  • 如何使用css3实现3d旋转动画特效
    这篇文章将为大家详细讲解有关如何使用css3实现3d旋转动画特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下:<!doctype html><...
    99+
    2024-04-02
  • vue.js如何在网页中实现一个金属抛光质感的按钮
    目录前言效果电脑效果手机效果说明完整代码总结前言 诶？这有一个按钮(～￣▽￣)～，这是一个在html中实现的具有金属质感并且能镜面反射的按钮~ 效果 电脑效果 手机效果 说明 ...
    99+
    2023-05-15
    vue 按钮 vue.js实现按钮 vue按钮样式
  • CSS3如何实现3D翻书效果
    小编给大家分享一下CSS3如何实现3D翻书效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）类似...
    99+
    2024-04-02
  • css3如何实现3d翻转效果
    今天小编给大家分享的是css3如何实现3d翻转效果，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计...
    99+
    2023-06-14
  • javascript如何实现点击按钮变色
    这篇“javascript如何实现点击按钮变色”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“javascript如何实现点击...
    99+
    2023-07-02
  • 怎么用纯css3实现黑色炫酷开关按钮动画效果
    本文小编为大家详细介绍“怎么用纯css3实现黑色炫酷开关按钮动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯css3实现黑色炫酷开关按钮动画效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢...
    99+
    2024-04-02
  • CSS3如何实现loading特效
    这篇文章主要为大家展示了“CSS3如何实现loading特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3如何实现loading特效”这篇文章吧。&nb...
    99+
    2024-04-02
  • 如何使用CSS3按钮鼠标悬浮实现光圈效果
    小编给大家分享一下如何使用CSS3按钮鼠标悬浮实现光圈效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1 、HTML相关知识点...
    99+
    2024-04-02
  • css3如何实现简单的白云飘动背景特效
    小编给大家分享一下css3如何实现简单的白云飘动背景特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！HTML结构该白云飘动特效的HTML结果非常简单，使用一个<div>来包裹一组作为白云的<div>...
    99+
    2023-06-08
  • 如何用CSS3来实现社交分享按钮
    这篇文章主要讲解了“如何用CSS3来实现社交分享按钮”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS3来实现社交分享按钮”吧！以前实现按钮一般都是...
    99+
    2024-04-02
  • CSS3 如何实现按钮边框动画功能
    本篇内容介绍了“CSS3 如何实现按钮边框动画功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！先看效果：html<a hr...
    99+
    2023-06-08
  • CSS3如何实现3D开门动画效果
    这篇文章将为大家详细讲解有关CSS3如何实现3D开门动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 这篇文章将为大家详细讲解有关CSS3如何实现3D开门动画效果，...
    99+
    2024-04-02
  • vue如何实现点击按钮切换背景颜色的效果
    不懂vue如何实现点击按钮切换背景颜色的效果？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。用vue简单的实现点击按钮切换背景颜色，具体代码如下所示：<div class="...
    99+
    2023-05-30
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作