国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 如何通過CSS創(chuàng)建不同效果的按鈕

如何通過CSS創(chuàng)建不同效果的按鈕

時間：2023-07-24 12:33:02 | 來源：網(wǎng)站運營

時間：2023-07-24 12:33:02 來源：網(wǎng)站運營

如何通過CSS創(chuàng)建不同效果的按鈕：


HTML代碼

<div class="pm"> <button>平面按鈕</button></div>

基礎(chǔ)的CSS樣式代碼

button{display: inline-block;margin: 0 10px 0 0;padding: 15px 45px;font-size:20px;font-family:"Bitter",serif;line-height: 20px;appearance: none; box-shadow:none; border-radius: 0;}

（1）平面樣式CSS按鈕

平面樣式按鈕的使用現(xiàn)在非常流行，并且符合無處不在的平面設(shè)計趨勢。，這些的平面樣式按鈕效果很好看。以下代碼是按鈕處于正常的情況下的狀態(tài)

.pm button { color:#fff; background-color:#6496c8; border:none;}效果圖：





（2）邊框樣式CSS按鈕

邊框樣式按鈕與平面按鈕屬于同一類。唯一的區(qū)別是，我們將使用邊框來代替平面按鈕所使用的背景顏色。以下代碼是按鈕處于正常的情況下的狀態(tài)

.pm button { color:#444; border:5px solid #6496c8; background-color: #fff;}效果圖：







（3）漸變和陰影樣式CSS按鈕

這種漸變和陰影樣式的按鈕更加符合我們在過去的日子里所看到的按鈕效果。如果你喜歡那些顏色多彩的那么漸變/陰影樣式的按鈕適合您。創(chuàng)建這款按鈕的好處是它的效果全部由CSS完成，因此可以輕松的對其放大或縮小而不必?fù)?dān)心會丟失分辨率，或者必須創(chuàng)建新圖像。以下代碼是按鈕處于正常的情況下的狀態(tài)

.pm button { color:#fff; text-align: center; box-shadow:inset 0 0 0 1px #e91e637d; background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}}效果圖：

（4）按樣式CSS按鈕

這些“按下”式按鈕結(jié)合了一些平面設(shè)計和假象，讓用戶感覺他們實際上按下了按鈕。當(dāng)用戶按下它時，它似乎陷入了頁面。它的實現(xiàn)需要用到陰影來設(shè)置，使其具有3D彈出外觀。以下代碼是按鈕處于正常的情況下的狀態(tài)




.pm button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d;}效果圖：

總結(jié)：以上就是本篇文章的全部內(nèi)容了，希望通過這篇文章可以讓大家學(xué)會使用CSS來制作按鈕效果。

以上就是如何通過CSS創(chuàng)建不同效果的按鈕的詳細(xì)內(nèi)容。

關(guān)鍵詞：效果,通過,創(chuàng)建

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉