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

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

公司主营业务：网站设计、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出点军免费做网站回馈大家。

使用方法

HTML结构

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按钮特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！