Look, a cool button.

Discussion in 'Web Design' started by Mauvros, Dec 20, 2015.

  1. Mauvros

    Mauvros PhD in dumbfuckery Member

    Messages:
    662
    Likes:
    374
    Local Time:
    9:36 AM
    Boon:
  2. Matheos
  3. Ever saw a button in your head, and for no reason on earth you made the shit out of that button, for no particular reason?!

    Anyhow, here's a button.

    [​IMG]

    Suppose it's cool for a slide/push navigation bar, or something. Hell knows, I just got bored. Fades to a darker color when hovered.

    HTML:
        <nav id="nav-btn">
            <div></div>
            <div></div>
            <div></div>
        </nav>

    Code:
                    #nav-btn {
                        position:fixed;
                        border:#bababa 1px solid;
                        border-radius:2px;
                        padding: 5px 10px;
                        cursor: pointer;
                        background-color:#fff;
                        transition: all 0.4s linear;
                    }
                   
                    #nav-btn:hover {
                        border: #000 1.2px solid;
                    }
                   
                    #nav-btn > div {
                        width:20px;
                        height:3px;
                        background:#Bababa;
                        margin: 4px 0px;
                        transition: all 0.4s linear;
                    }
                   
                    nav-btn:hover > div {
                        background:#000;
                    }
     
  4. bod

    bod Registered User Member

    Messages:
    13
    Likes:
    4
    Local Time:
    6:36 PM
    Boon:
  5. bod
  6. happens all the time man
     
    Mauvros likes this.
  7. Mauvros

    Mauvros PhD in dumbfuckery Member

    Messages:
    662
    Likes:
    374
    Local Time:
    9:36 AM
    Boon:
  8. Matheos
  9. Was also just now that I realised there's an actual charmap of this pretty much, which is this ->.
    Coulda just added some padding and a border and be done with it.
     
  10. Ralph

    Ralph KING Member

    Messages:
    1,237
    Likes:
    376
    Local Time:
    3:36 AM
    Boon:
  11. ralph
  12. Looks good. Should make it rotate 90 degrees on click.
     
  13. Mauvros

    Mauvros PhD in dumbfuckery Member

    Messages:
    662
    Likes:
    374
    Local Time:
    9:36 AM
    Boon:
  14. Matheos
  15. Rad idea actually. Made a decent looking button get a bit better! What I'm doing at the moment is just a Javascript push menu, and right now the button is the toggle.

    Thinking about it, I'll probably make it rotate 90 degrees when toggled open, and the revert back when toggled again.
     
  16. Ralph

    Ralph KING Member

    Messages:
    1,237
    Likes:
    376
    Local Time:
    3:36 AM
    Boon:
  17. ralph
  18. Yeah, that's what I meant lol
     
  19. HymenBurster

    HymenBurster Registered User Member

    Messages:
    6
    Likes:
    3
    Local Time:
    7:36 AM
    Boon:
  20. HymenBurster
  21. Looks pretty basic and neat, the code looks quite Bootstrap'ish though.

    Also, with regards to your border rule in #nav-btn, pixels are integers only, they don't allow for decimal points. It's either 1 or 2, no 1.2 or anything as such.
     
  22. Baevus

    Baevus Registered User Member

    Messages:
    6
    Likes:
    0
    Local Time:
    5:36 PM
    Boon:
  23. Baevus
  24. sugoi desu
     
  25. Pray

    Pray Registered User Member

    Messages:
    239
    Likes:
    49
    Local Time:
    7:36 AM
    Boon:
  26. Pray
  27. Fucking awesome. Good work on this mate. Hope to see you being a professional coder like Sledmore