五邊形按鈕是一種可以讓網站頁面變得更加獨特和美觀的按鈕。在使用五邊形按鈕時,我們需要用到CSS樣式來設置它的樣式。
.button { position: relative; width: 120px; height: 50px; border: none; outline: none; background-color: #FF937B; transform: skew(-25deg); overflow: hidden; } .button:before { content: ""; position: absolute; top: 0; left: -27.5px; width: 55px; height: 100%; background-color: #C94E47; transform: skew(25deg); } .button:after { content: ""; position: absolute; top: 0; left: 95px; width: 0; height: 100%; background-color: #FFDCB4; transform-origin: left; transition: width 0.4s; } .button:hover:after { width: 25px; } .button span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; z-index: 2; transform: skew(25deg); }
上述代碼中,我們首先定義了一個按鈕容器的樣式。通過設置寬度和高度,我們可以控制按鈕的大小,背景顏色也可以根據需求進行更改。
接著,我們使用了:before和:after偽元素來創建五邊形的形狀。:before元素用于創建五邊形的左側,而:after元素用于創建五邊形的右側。通過設置元素的位置和背景顏色,我們可以控制五邊形的形狀和顏色。
最后,我們在按鈕中添加了一個文本內容來顯示按鈕的名稱。通過設置文本內容的位置、大小、顏色等屬性,我們可以讓文本與按鈕的樣式相協調。
上一篇京東css要求代碼
下一篇京東圖片切換效果css