Grow your CSS skills. Land your dream job.

How to create some simple menu buttons?

  • # August 27, 2013 at 1:25 pm

    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.

    # August 27, 2013 at 3:40 pm

    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/

    # August 27, 2013 at 4:01 pm

    Interesting, but quality-wise, it’s not close to the buttons at CSS-tricks. Hmm, if we use Reveal Source Code for CSS-tricks would it be easy to pick up the pieces for CSS-tricks buttons?

    Thanks.

    # August 27, 2013 at 7:05 pm

    All right, I took a look at the source code for this forum, it seems that the
    “bbp-the-content” class covers the [Bold], [Italic] buttons, and I don’t see img tag near by, these buttons seem to be created with a CSS class, however, checking out a few CSS files, couldn’t find where this class is located. Maybe you have better eyes…

    Thanks.

    # August 28, 2013 at 1:52 am

    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

    # August 28, 2013 at 3:09 am

    Very nice, Paulie, many thanks.

    # August 28, 2013 at 6:13 am

    btw, Paulie, please log into my app and take a look, how can I reduce the button width and height just a bit? They seem a bit too big.

    Thanks.

    # August 28, 2013 at 6:55 am

    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

    # August 28, 2013 at 7:07 am

    They are the size of your SUBMIT button, Not the [Bold], [Italic] etc. buttons. I’d like my menu items to use the [Bold] etc. size.

    Thanks.

    # August 28, 2013 at 7:08 am

    Just post some code or make a reduced case in Codepen

    # August 28, 2013 at 7:13 am

    Almost exactly as you posted:

        .button, ul li {
            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;
            }
    
    # August 28, 2013 at 7:20 am

    Why are you including ul li?

    # August 28, 2013 at 7:52 am

    True. ul and li isn’t necessary here. But the CSS code seems for your SUBMIT button.

    # August 28, 2013 at 8:00 am

    So what is the issue?

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

    # August 28, 2013 at 8:19 am

    [
    They are the size of your SUBMIT button, Not the [Bold], [Italic] etc. buttons. I’d like my menu items to use the [Bold] etc. size.
    ]

    Also, see #rcp_submit in the code.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".