Как создать стиль кнопок с содержимым внутри

0

Недавно я наткнулся на сайт: 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>

Что определенно не похоже на добавленную ссылку.

Как я могу это достичь?

  • 1
    Итак, вы использовали инструмент инспектора элементов своего браузера и не смогли найти всю информацию CSS, связанную с элементами на этом веб-сайте? Пожалуйста, подумайте о настройке скрипки.
  • 0
    Да, я проверил учетную запись разработчика, и не все стили отображаются.
Показать ещё 8 комментариев
Теги:

2 ответа

1
Лучший ответ

вот FIDDLE

скопировал весь свой элемент <ul>, и всю таблицу стилей,

я удалил большинство нерелевантных стилей, просто просмотрел все оставшиеся и удалил те, которые не имеют отношения к списку пользователей.

  • 0
    Спасибо. Действительно выручил меня !!!
  • 0
    Рад, что смог помочь :)
Показать ещё 6 комментариев
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);
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню