Question

我最近遇到了网站：https://www.airbnb.com/locations/new-york/neighborhoods

其中有一个非常好的功能，每个LI都有一个按钮，里面有一些跨度。

我试图模仿相同但却无法找到所有样式。

这是我到目前为止所做的：

<style>
ul {
    list-style-type: none;
}
.btn {
    font-weight: bold;
    display: inline-block;
    padding: 0.4em 1.2em;
    -moz-box-sizing: border-box;
    text-align: center;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    vertical-align: middle;
    margin-bottom: 0px;
    border-radius: 5px;
    box-shadow: 0px 0px 0.2em rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 0px 0px #000;
    background-image: -moz-linear-gradient(center top , #00AEFF 0%, #018FE1 100%);
    border-width: 1px;
    border-style: solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-color: #0195EB #0083C7 #0175B8;
    font-size: 12px;
    line-height: 16px;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
}
.btn.large {
    line-height: normal;
    font-size: 15px;
    padding: 0.6em 1.3em;
}
.btn:link, .btn:visited {
    color: #FFF;
}
.traits li a {
    display: inline-block;
}
.traits li {
    margin: 0px 8px 11px 0px;
    display: inline-block;
    position: relative;
}
</style>
<ul id="trait_selector" class="traits">
    <li class="trait" data-trait-id="66">
        <a class="premote trait-link large btn" data-trait-id="66" href="/locations/new-york/neighborhoods?tags[]=66">
            <span class="check"></span>
            <span class="name"></span>
            <span class="count"></span>
        </a>
    </li>
    <li class="trait" data-trait-id="8">
        <a class="premote trait-link large btn" data-trait-id="8" href="/locations/new-york/neighborhoods?tags[]=8"></a>
    </li>

</ul>

这绝对不像添加的链接。

我怎样才能实现它？

Answer 1

<ul>
<li><a href="#"><img src="checkbox.png" alt=""/>Menuitem</a></li>
</ul>

或

<ul>
<li><a href="#"><span class="checkbox"></span>Menuitem</a></li>
</ul>

.checkbox {
    background: url(images/checkbox.png);
}

Answer 2

这是一个FIDDLE

复制了整个<ul>元素和整个样式表

我删除了大部分不相关的样式，只需查看剩下的内容并删除与用户列表无关的样式。

如何创建内容类似样式的按钮

2 个答案: