Jump to content

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

Featured Replies

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

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);
}

  • Author
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

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
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

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

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
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.