這篇文章給大家分享的是有關(guān)CSS3如何實(shí)現(xiàn)白色質(zhì)感3D按鈕特效的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出點(diǎn)軍免費(fèi)做網(wǎng)站回饋大家。

使用方法

HTML結(jié)構(gòu)

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;

}

感謝各位的閱讀！關(guān)于“CSS3如何實(shí)現(xiàn)白色質(zhì)感3D按鈕特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！