Simple Clear Css Navbar Buttons

Go down

Simple Clear Css Navbar Buttons Empty Simple Clear Css Navbar Buttons

Post by _Twisted_Mods_ on March 2nd 2019, 5:42 pm

Example

Simple Clear Css Navbar Buttons YHcigIy


CSS

Code:

.navlinks{background:transparent!important;}
a.btn-light {
    color: #fff;
    background-color: rgba(255,255,255,.125);
    border-color: rgba(255,255,255,.125);
    font-size: .70rem!important;
    font-weight: 500!important;
    letter-spacing: 1px;
    padding: 9px 19px!important;
    border-radius: .25rem!important;
    text-transform: uppercase;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    height: auto!important;
    line-height: inherit!important;
    display: inline-block;
    width: auto;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 2px;
    box-sizing: border-box!important;
}
.btn-light:hover {
   background-color: rgba(255, 255, 255, 0.18);
   border-color: rgba(255, 255, 255, 0.18);
}


Javascript

Code:

$(function(){
   $('.navlinks a').attr('class','btn-light');
});   
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2106
Reputation : 333
Language : English
Location : Ms

View user profile http://liquidcode.forumotion.com

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by SarkZKalie on March 11th 2019, 8:01 am

Does it work on all version?

Thank you


Simple Clear Css Navbar Buttons Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by The Last Outlaw on March 11th 2019, 4:04 pm

It works for me. I have a scrollable Nav Bar. I have to admit. It looks GOOOOOOOOOD!!!
The Last Outlaw
The Last Outlaw
Forumember

Male Posts : 343
Reputation : 10
Language : English (US)
Location : Salem, Oregon, USA

View user profile https://www.betheasbyte.com/

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by pedxz on April 18th 2020, 1:35 am

Amazing!
Nevertheless is possible use this code without JavaScript, just use (native navbar):
Code:
 .navlinks{background:transparent!important;}
a.mainmenu {
    color: #fff;
    background-color: rgba(255,255,255,.125);
    border-color: rgba(255,255,255,.125);
    font-size: .70rem!important;
    font-weight: 500!important;
    letter-spacing: 1px;
    padding: 9px 19px!important;
    border-radius: .25rem!important;
    text-transform: uppercase;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    height: auto!important;
    line-height: inherit!important;
    display: inline-block;
    width: auto;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 2px;
    box-sizing: border-box!important;
}
a.mainmenu:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.18);
}
pedxz
pedxz
Forumember

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by YoshiGM on April 19th 2020, 7:09 pm

Great job @_Twisted_Mods_
I like it Very good
YoshiGM
YoshiGM
Forumember

Male Posts : 919
Reputation : 120
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by BlackScorpion on April 21st 2020, 4:13 am

Another Great Job Buddy! This looks great for a light colored forum.
BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 6534
Reputation : 891
Language : English
Location : USA

View user profile https://help.forumotion.com/f6-graphic-design-section

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum