emunoz

Action bar with separate round buttons

Blog Post created by emunoz on Feb 20, 2017

The action bar can look quite interesting by setting a transparent background and then making the buttons on it look like round-cornered buttons. The background is a little blonder in hover.

.pageTitle + .actionBar {border: none;} /*This will remove the border*/

/*buttons, mainButton on the left, secondaryButton on the right of the screen*/

.actionBar .mainButton > a {color: #FFFFFF !important; background: none scroll 0 0 #121214 !important; text-shadow: none !important; text-decoration: none; box-shadow: none !important; border: none; border-radius: 4px !important; margin: auto 3px;}

.actionBar .mainButton > a:hover {color: #FFFFFF !important; background: none scroll 0 0 #333333 !important;}

.actionBar .secondaryButton > a {color: #FFFFFF !important; font-weight: bold; background: none scroll 0 0 #121214 !important; text-shadow: none !important; text-decoration: none; box-shadow: none !important; border: none; border-radius: 4px; margin: auto 3px;}

.actionBar .secondaryButton > a:hover {color: #FFFFFF !important; background: none scroll 0 0 #333333 !important;}

.actionBar .mainButton h2 > a {color: #FFFFFF !important; background: none scroll 0 0 #121214 !important; text-shadow: none !important; text-decoration: none; box-shadow: none !important; border: none; border-radius: 4px !important; margin: auto 3px;}

.actionBar .secondaryButton h2 > a {color: #FFFFFF !important; background: none scroll 0 0 #121214 !important; text-shadow: none !important; text-decoration: none; box-shadow: none !important; border: none; height: 100%; border-radius: 4px; margin: auto 3px;}

.actionBar ul li a:hover {background-color: #333333 !important;}

Captura de pantalla de 2017-02-20 18-59-09.png

Outcomes