Как сделать кнопки для соцсетей от яндекса?

Question

[timers]

Нужно сделать кнопки от яндекса в таком формате как на рисунке

т.е. сделать их резиновыми 5 штук соответственно это width: 20%, поиск результатов не дал, нашел только как увеличить и все.

https://jsfiddle.net/infotimers/booyhwgy/

Answer 1

[Eugene Chefranov]

.soc-icon {float: left; width: 100%;}

.ya-share2__container_size_m .ya-share2__icon {
    height: 32px !important; /* 24px */
    width:  100% !important; /* 24px */
    background-size: 100% 32px !important; /* Увеличиваем кнопки, по-умолчанию: 24px 24px */
}

.ya-share2__item {
  width: 20%;
}

.ya-share2__list, .ya-share2__link, .ya-share2__badge, .ya-share2__list {
  width:  100%;
}

Comments

[timers]

Спасибо, еще момент нужно отступы сделать допустим 15px, а в 5 убрать естественно.
Пы таюсь сделать через: nth-child но он видит его как первый блок и убирает везде.

[Alams Stoyne]

timers, Дополнил:

.ya-share2__list_direction_horizontal {display: flex; width: 100%;}

.ya-share2__item {
    height: 32px !important;
    width:  20%!important; 
    margin: 0!important;
}
.ya-share2__link, .ya-share2__badge{
  height: 32px !important; 
  width: 100%;
  display: flex!important;
  justify-content: center;
  margin: 0 15px;
}
.ya-share2__icon{
  margin: auto;  
}
.ya-share2__link:nth-child(1){
  margin-left: 0;
}
.ya-share2__link:nth-last-child(1){
  margin-right: 0;
}

[timers]

Alams Stoyne, да но тут получается отступ и слева и справа, вот как раз по самым краям мне отсуп не нужен.

[Alams Stoyne]

timers, либо скриншот что должно получиться либо более развернутый вопрос.

Поясню:
margin: 0 15px;
Это равносильно:

margin-top: 0;
 margin-left: 15px;
 margin-bottom: 0;
 margin-right: 15px;

Таким образом мы убрали отступы у первой и последней кнопки:

.ya-share2__link:nth-child(1){
  margin-left: 0;
}
.ya-share2__link:nth-last-child(1){
  margin-right: 0;
}

[timers]

Alams Stoyne, но не срабатывает https://jsfiddle.net/infotimers/booyhwgy/2/
По краям остаются отступы

[Alams Stoyne]

timers, Тогда так:

.soc-icon {float: left; width: 100%;}

.ya-share2__list_direction_horizontal {display: flex; width: 100%; border: 1px solid #000;}
.ya-share2__list{
  display: flex!important; 
}
.ya-share2__list .ya-share2__item {
    height: 32px !important;
    width:  calc(20% - 12px)!important; 
    margin: 0 auto!important; 
    display: block;
}
.ya-share2__link, .ya-share2__badge{
  height: 32px !important; 
  width: 100%;
  display: flex!important;
  justify-content: center;
}
.ya-share2__icon{
  margin: auto;  
}
.ya-share2__container_size_m .ya-share2__item:nth-child(1){
  margin-left: 0!important;
}
.ya-share2__container_size_m .ya-share2__item:nth-last-child(1){
  margin-right: 0!important;
}

[timers]

Alams Stoyne, Спасибо, теперь понял в чем подвох.

Answer 2

[Alams Stoyne]

Или так:

.ya-share2__list_direction_horizontal {display: flex; width: 100%;}

.ya-share2__item {
    height: 32px !important;
    width:  20%!important; 
    margin: 0!important;
}
.ya-share2__link, .ya-share2__badge{
height: 32px !important; 
  width: 100%;
  display: flex!important;
  justify-content: center;
}

Comments

[timers]

Спасибо, еще момент нужно отступы сделать допустим 15px, а в 5 убрать естественно.
Пы таюсь сделать через: nth-child но он видит его как первый блок и убирает везде.

[Alams Stoyne]

timers, Повторяетесь ;)

.ya-share2__list_direction_horizontal {display: flex; width: 100%;}

.ya-share2__item {
height: 32px !important;
width: 20%!important;
margin: 0!important;
}
.ya-share2__link, .ya-share2__badge{
height: 32px !important;
width: 100%;
display: flex!important;
justify-content: center;
margin: 0 15px;
}
.ya-share2__icon{
margin: auto;
}
.ya-share2__link:nth-child(1){
margin-left: 0;
}
.ya-share2__link:nth-last-child(1){
margin-right: 0;
}