欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

五邊形按鈕css

傅智翔2年前6瀏覽0評論

五邊形按鈕是一種可以讓網站頁面變得更加獨特和美觀的按鈕。在使用五邊形按鈕時,我們需要用到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元素用于創建五邊形的右側。通過設置元素的位置和背景顏色,我們可以控制五邊形的形狀和顏色。

最后,我們在按鈕中添加了一個文本內容來顯示按鈕的名稱。通過設置文本內容的位置、大小、顏色等屬性,我們可以讓文本與按鈕的樣式相協調。