CSS平行四邊形按鈕是現代Web設計中常用的按鈕樣式之一。它的特點是簡單、現代而且能夠增加頁面的視覺動感。下面就讓我們來一探究竟。
HTML代碼: <button class="parallelogram">Click Me</button> CSS代碼: .parallelogram { width: 120px; height: 40px; background-color: #1abc9c; color: white; font-size: 16px; border: none; transform: skewX(-30deg); } .parallelogram:hover { cursor: pointer; background-color: #16a085; }
上述代碼利用CSS的transform屬性中的skew函數來傾斜按鈕,生成一個平行四邊形的形狀。skewX函數定義元素沿著X軸傾斜的角度,由于我們需要生成平行四邊形,所以將傾斜角度設置為-30度。
同時,我們也針對按鈕使用了最常用的CSS屬性,包括背景色、字體顏色、字體大小、邊框、鼠標指針等。
值得注意的是,當鼠標懸停在按鈕上時,會觸發:hover偽類,這樣我們就重新定義了背景色,以增強用戶的點擊體驗。
需要指出的是,CSS平行四邊形按鈕具有高度的可定制性。我們可以調整按鈕的寬高、傾斜角度、邊框樣式、陰影等,以符合我們的設計需要。
以上是有關CSS平行四邊形按鈕的基本知識。希望本文對您有所幫助。