按钮图标

CSS3白色质感3D按钮特效

也想出现在这里?联系我们
面包多

CSS3白色质感3D按钮特效-创客云
这是一款 css3 白色质感 3D 按钮特效。该按钮使用 svg 做为图标,通过 css3 代码,打造出非常炫酷的 3d 按钮效果。
HTML 结构

  1. <div class="grid">
  2.   <button><span>Normal</span></button>
  3.   <button></button>
  4.   <button class="icon">
  5.     <svg width="626" height="512" viewBox="0 0 626 512" xmlns="http://www.w3.org/2000/svg">
  6.       <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>
  7.     </svg>
  8.   </button>
  9.   <div class="button" role="button"><span>Not focusable</span></div>
  10.   <div class="button" role="button"></div>
  11.   <div class="button icon" role="button">
  12.     <svg width="626" height="512" viewBox="0 0 626 512" xmlns="http://www.w3.org/2000/svg">
  13.       <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>
  14.     </svg>
  15.   </div>
  16.   <button disabled="disabled"><span>Disabled</span></button>
  17.   <button disabled="disabled"></button>
  18.   <button class="icon" disabled="disabled">
  19.     <svg width="626" height="512" viewBox="0 0 626 512" xmlns="http://www.w3.org/2000/svg">
  20.       <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>
  21.     </svg>
  22.   </button>
  23. </div>
也想出现在这里?联系我们
创客主机

css 样式

也想出现在这里?联系我们
创客主机

  1. @-webkit-keyframes active {
  2.   from {
  3.     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);
  4.   }
  5.   to {
  6.     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;
  7.   }
  8. }
  9. @keyframes active {
  10.   from {
  11.     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);
  12.   }
  13.   to {
  14.     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;
  15.   }
  16. }
  17. *,
  18. *:before,
  19. *:after {
  20.   box-sizing: border-box;
  21. }
  22.  
  23. body {
  24.   margin: 0;
  25.   padding: 30px;
  26.   background: #f8f8f8;
  27.   min-height: 100vh;
  28.   display: flex;
  29.   align-items: center;
  30.   justify-content: center;
  31. }
  32.  
  33. .grid {
  34.   max-width: 400px;
  35.   margin: 50px auto;
  36.   display: grid;
  37.   grid-template-columns: 150px 150px 50px;
  38.   align-items: center;
  39.   justify-content: center;
  40.   grid-gap: 40px 25px;
  41. }
  42.  
  43. button,
  44. [role="button"] {
  45.   -webkit-appearance: none;
  46.   -webkit-user-select: none;
  47.      -moz-user-select: none;
  48.       -ms-user-select: none;
  49.           user-select: none;
  50.   display: flex;
  51.   align-items: center;
  52.   justify-content: center;
  53.   outline: none;
  54.   cursor: pointer;
  55.   width: 150px;
  56.   height: 50px;
  57.   background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
  58.   border-radius: 30px;
  59.   border: 1px solid #8F9092;
  60.   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;
  61.   transition: all 0.2s ease;
  62.   font-family: "Source Sans Pro", sans-serif;
  63.   font-size: 14px;
  64.   font-weight: 600;
  65.   color: #606060;
  66.   text-shadow: 0 1px #fff;
  67. }
  68. button::-moz-focus-inner,
  69. [role="button"]::-moz-focus-inner {
  70.   border: 0;
  71. }
  72. button > *,
  73. [role="button"] > * {
  74.   transition: -webkit-transform 0.2s ease;
  75.   transition: transform 0.2s ease;
  76.   transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  77. }
  78. button:hover:not([disabled]),
  79. [role="button"]:hover:not([disabled]) {
  80.   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;
  81. }
  82. button:hover:not([disabled]) > *,
  83. [role="button"]:hover:not([disabled]) > * {
  84.   -webkit-transform: scale(0.975);
  85.           transform: scale(0.975);
  86. }
  87. button:focus:not(:active),
  88. [role="button"]:focus:not(:active) {
  89.   -webkit-animation: active 0.9s alternate infinite;
  90.           animation: active 0.9s alternate infinite;
  91.   outline: none;
  92. }
  93. button:active:not([disabled]),
  94. [role="button"]:active:not([disabled]) {
  95.   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;
  96. }
  97. button:active:not([disabled]) > *,
  98. [role="button"]:active:not([disabled]) > * {
  99.   -webkit-transform: scale(0.95);
  100.           transform: scale(0.95);
  101. }
  102. button:disabled,
  103. [role="button"]:disabled {
  104.   opacity: 0.6;
  105.   cursor: not-allowed;
  106. }
  107. button.icon,
  108. [role="button"].icon {
  109.   width: 50px;
  110. }
  111. button.icon svg,
  112. [role="button"].icon svg {
  113.   margin-top: 3px;
  114.   width: 30px;
  115.   height: 30px;
  116. }

Codepen 网址:https://codepen.io/jouanmarcel/pen/RwweKqb

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!