更改按鈕形狀html/css

-1

我正在開發一個html項目，製作一個網站，並且我通過爲每個菜單選項創建按鈕添加了一個導航欄/菜單。更改按鈕形狀html/css

我的按鈕是黑色的，我希望它的形狀變成紅色的一個按鈕。 enter image description here

這裏是我的CSS代碼，設置我的按鈕的形狀：

忽略colors.My問題是如何改變形狀，沒有別的。有任何想法嗎？

li { 
    display: inline; 
    border: 0px solid #000000; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    border-radius: 1px 1px ; 
    background-color: #cc0323 
}

來源

2014-01-09 HpdsbuΖt

如果你通過你可以很容易得到這樣的信息網上。請做一些調查並至少嘗試一下。我推薦Mozilla Dev。網絡爲您的前端需求。對於Css，你可以看看這裏 - > https://developer.mozilla.org/en-US/learn/css –

謝謝。我這次信任stackoverflow。但是，我會做更多的搜索！ –

從問題的聲音，你想要改變形狀而不影響文字。實現此目的的最佳方式是::before或::after僞元素。

li { 
    border: 0px; 
    display: inline-block; 
    position: relative; 
    z-index: 1; 
    border: 0px solid #000000; 
    background-color: transparent; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    margin-left: 20px; 
} 
li::after { 
    content: "'"; 
    color: transparent; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
    border-radius: 3px; 
    background-color: #cc0323; 
    transform: skew(-30deg); 
-webkit-transform: skew(-30deg); 
-o-transform: skew(-30deg); 
-moz-transform: skew(-30deg); 
-ms-transform: skew(-30deg); 
}

這裏是什麼樣子： http://jsbin.com/aCIQupeJ/2

來源

2014-01-09 03:57:06 Zeal

是的，這兩個答案都是合適的，但這一個，與文本正常和形狀，因爲我想他們，解決了我與文本的所有問題。謝謝。 –

好吧，現在我有我的按鈕上面的代碼。當我將鼠標懸停在它上面時，我怎樣才能讓它改變按鈕的顏色？ @熱情 –

使用變換：歪斜上x軸。例如：

transform: skew(-30deg); 
-webkit-transform: skew(-30deg); 
-ms-transform: skew(-30deg);

應該給你想要的東西。但是，你不能用它內嵌元素，所以你必須要改變這種狀況（內聯塊，也許）：

li { 
    display: inline-block; 
    border: 0px solid #000000; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    border-radius: 1px 1px ; 
    background-color: #cc0323 
    transform: skew(-30deg); 
    -webkit-transform: skew(-30deg); 
    -ms-transform: skew(-30deg); 
}

DEMO

來源

2014-01-09 03:22:26 Cilan

感謝您的回答。但我可以理解在哪裏使用你的命令。複製並粘貼到我現有的CSS代碼？ –

@ HpdsbuZt在CSS – Cilan

我只是複製並粘貼到現有的CSS代碼？ –

更改按鈕形狀html/css

回答

相關問題