Question

我想知道Facebook和TeamTreehouse这样的网站如何定制导航按钮。像这样：

（来自teamtreehouse.com） https://gyazo.com/47e09a6d70019b5b8d93549af20f1a9c，还有这个，（来自facebook.com） https://gyazo.com/32de164e941c4f80355bd3d0b6045abe。

有人可以向我解释一下如何制作这些定制形状的按钮吗？ :) 谢谢！

注意：对于使用链接而不是图片感到抱歉，没有足够的声誉......

Answer 1

一个简单的快速提示是使用bootstrap。然后定制。如果要从头开始创建自己的按钮样式，请使用CSS属性，如-moz-

Answer 2

您不必使用按钮。它可以是一个简单的A标签，并使用CSS提供with，size和background。你也可以用这种技术给出悬停状态。

<a href="whatever.html" class="icon"></a>

<style type="text/css">
.icon{
    display:block;
    width:20px;
    height:20px;
    background-image:url(your-image.gif) bottom;
}

.icon:hover{
    background-position:top;
}
</style>

你如何在html / css中制作自定义形状的按钮？

2 个答案: