更改按钮形状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

回答

相关问题