как нарисовать пузырь лайков как то, что находится на правой стороне кнопки лайк в фейсбуке

0

Для следующей кнопки, например, кнопки с буквой, есть значок с плюсом (?) Справа от кнопки (см. Ниже - пузырь с текстом "3.5k" на нем)

Изображение 174551

Вопрос в том, был ли он использован css? Как его создать?

  • 1
    почему это было бы проблемой сделать это в css?
  • 1
    Вы можете осмотреть элемент с помощью панели инструментов разработчика, затем вы увидите, что стрелка влево сделана с помощью <s> </ s>
Показать ещё 2 комментария
Теги:
button

1 ответ

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

Ссылка на скрипт: http://jsfiddle.net/zEVbe/1/

Да, этот пузырь можно нарисовать CSS по-разному. Один из способов написан ниже.

HTML:

<div class="like">Like</div>
<div class="counter">3.5k</div>

CSS:

body{
 font-family:Calibri;
}
.like{
    background:#3b5998;
    padding:0px 10px;
    border-radius:2px;
    color:#fff;
    cursor:pointer;
    float:left;
    height:25px;
    line-height:25px;
}
.like:hover{
    background:#444;
}
.counter{
    background:#fafafa;
    border:1px solid #aaa;
    float:left;
    padding:0px 8px;
    border-radius:2px;
    margin-left:8px;
    height: 23px;
    line-height:23px;
}
.counter:before{
    display:block;
    float:left;
    content:' ';
    width:6px;
    height:6px;
    background:#fafafa;
    margin-left:-12px;
    border-right:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    margin-top:8px;
    border-left:1px solid #aaa;
    border-bottom:1px solid #aaa;
}

Ещё вопросы

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