Jump to content

Как сделать такие кнопки

Featured Replies

  • Author
comment_176511
1 час назад, by_ix сказал:

by_ix где именно нужно? на сайте или на форуме? и иконка эта тоже нужна?

На форуме. Иконка не обязательно.

Мне нужно такое оформление кнопки.

  • Author
comment_176586
В 16.01.2022 в 21:20, by_ix сказал:

by_ix где именно нужно? на сайте или на форуме? и иконка эта тоже нужна?

Реально ли сделать такое на форуме?

comment_176589

NeArtemkut 
не до конца понимаю, где именно они нужны такие.
пробуйте так, скажете потом, что не нужно или что добавить.
в custom.css
.ipsNavBar_secondary > li[data-role="navBarItem"] {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    color: black;
    max-height: 48px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.38);
}

comment_176590
3 минуты назад, by_ix сказал:

border-bottom: 3px solid rgba(0, 0, 0, 0.38);

там, скорее, shadow, а не border

  • Author
comment_176610
13 часов назад, by_ix сказал:

NeArtemkut 
не до конца понимаю, где именно они нужны такие.
пробуйте так, скажете потом, что не нужно или что добавить.
в custom.css
.ipsNavBar_secondary > li[data-role="navBarItem"] {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    color: black;
    max-height: 48px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.38);
}

Мне нужно заменить на эти кнопки, сделать их такими как на сайте reallyworld.ru

QyHzsHRt1po.jpg

Dwm_muRPTKo.jpg

3PL0eOLKpK4.jpg

comment_176633

NeArtemkut 

.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a {
    background: white;
    border-radius: 12px;
    color: black;
    border-bottom: #e0e0e0 4px solid;
    padding: 0px 20px;
    line-height: 50px;
}

 

В 19.01.2022 в 00:18, Desti сказал:

shadow

border.

  • Author
comment_176635
28 минут назад, by_ix сказал:

NeArtemkut 

.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a {
    background: white;
    border-radius: 12px;
    color: black;
    border-bottom: #e0e0e0 4px solid;
    padding: 0px 20px;
    line-height: 50px;
}

 

border

Можно сделать красивое выделение? (Как показано выше в скринах(

  • Author
comment_176637
3 минуты назад, by_ix сказал:

NeArtemkut что не так? как на скрине показано, так и сделано.
 

321.PNG

Вот такое :

IMG_20220119_210740.jpg

  • Author
comment_176639
1 минуту назад, by_ix сказал:

изначально спросил у вас.

Тупанул я... Простите...

Edited by NeArtemkut

comment_176641

NeArtemkut 

/* menu */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a {
    background: white;
    border-radius: 12px;
    color: black;
    border-bottom: #e0e0e0 4px solid;
    line-height: 50px;
}
/* fa */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a::before {
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    background-color: #fc9404;
    color: #fff;
    -webkit-box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    padding: 8px 10px;
    margin-right: 10px;
}
/* site */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="16"]::before {
    content: "\f0ac";
}
/* forum */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="1"]::before {
    content: "\f015";
}
/* activity */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="2"]::before {
    content: "\f1ea";
}
/* rules */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="17"]::before {
    content: "\f15c";
}

 

  • Author
comment_176659
14 часов назад, by_ix сказал:

NeArtemkut 

/* menu */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a {
    background: white;
    border-radius: 12px;
    color: black;
    border-bottom: #e0e0e0 4px solid;
    line-height: 50px;
}
/* fa */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a::before {
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    background-color: #fc9404;
    color: #fff;
    -webkit-box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    padding: 8px 10px;
    margin-right: 10px;
}
/* site */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="16"]::before {
    content: "\f0ac";
}
/* forum */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="1"]::before {
    content: "\f015";
}
/* activity */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="2"]::before {
    content: "\f1ea";
}
/* rules */
.ipsNavBar_primary.ipsLayout_container > .ipsClearfix > .ipsNavBar_active > a[data-navitem-id="17"]::before {
    content: "\f15c";
}

 

А как разместить кнопки рядом с логотипом, и чтобы было ровно все

XvzEszpTpAU.jpg

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.