How to create some simple menu buttons?

[knowledgenotebook]

Hi,

I’ve posted a similar note a few days ago on this thing. That is, I have a fully functional web app, and yet my client would like it to look better.
And now I have a new idea, why not turn Menu Items into Buttons (with some nice CSS code)? Menu Item such as [Add Patient], [Add Visit]…

Here’s the app URL,
http://184.73.76.212/mpod
username:donli
password:qazplm

And I wonder if any of you could get me started on this since I really suck with CSS… btw, the CSS-Tricks menu items for forum posting such as [Bold], [Italic] looks awesome.

Many thanks.

[linardzb]

Im not sure, but here could be the resource you could try. It lets you customize the button as you please, just play with it. Nice app by the way

http://www.cssbuttongenerator.com/

[Paulie_D]

Simples:

.button, .markItUpHeader ul li, #rcp_submit {
display: inline-block;
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;
color: white;
white-space: nowrap;
font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
padding: 9px 16px;
line-height: 1.4;
position: relative;
top: -5px;
}

http://codepen.io/Paulie-D/pen/yJExr

[Paulie_D]

I don’t need to log in to ask how are they styled now.

Just post some code or make a reduced case in Codepen

[Paulie_D]

Just post some code or make a reduced case in Codepen

[Paulie_D]

Why are you including ul li?

[Paulie_D]

So what is the issue?

http://codepen.io/Paulie-D/pen/FduIC

[Paulie_D]

You aren’t explaining very well.

I’ve given you the CSS….you really need to build a Codepen and explain PRECISELY what YOUR problem is.

[Author]

Posts