button fx

This topic is: resolved

Tagged: 

This topic contains 8 replies, has 2 voices, and was last updated by  Onizuki 1 year, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #78332

    Onizuki
    Member

    hallo

    how can I replicate the cool button fx here at mystudiopress?

    thanks

    #78335

    nutsandbolts
    Keymaster

    If you use a tool like Firebug to inspect the CSS for the buttons, you can get a good idea of how they’re configured or what kind of styling is applied to them. Hopefully that helps!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78429

    Onizuki
    Member

    Hallo

    Im using chrome developer, is there any big difference with firebug?
    Im having problem even finding the button, Im opening many divs without finding it. Actually there is a better hacking tool for newbies? Looking how others made the work can be a great way to improve the skills you need.

    thanks

    • This reply was modified 1 year, 4 months ago by  Onizuki.
    • This reply was modified 1 year, 4 months ago by  Onizuki.
    #78431

    nutsandbolts
    Keymaster

    No, I actually prefer Chrome most of the time myself. Which button in particular are you trying to target?


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78438

    Onizuki
    Member

    The submit button. I need a css effect that looks like there is a screen moving up/down on hover.

    #78440

    nutsandbolts
    Keymaster

    Do you have a link? I don’t know what page you’re seeing the submit button on.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78441

    Onizuki
    Member
    #78442

    nutsandbolts
    Keymaster

    Oh, okay! I didn’t understand which one you meant.

    The submit button here is just using a background image, then on hover it’s using an image with the gradient reversed. Here’s the CSS being used:

    input[type="button"], input[type="submit"], input[type="reset"], button {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    background: url(images/gradient.png) 0 0;
    border: 1px solid #ccc;
    color: #555;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    line-height: 22px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #fff;
    transition: all 0.2s ease-in-out;
    }
    
    input:hover[type="button"],
    input:hover[type="submit"],
    button:hover {
    	background: url(images/gradient.png) 0 -33px;
    	text-decoration: none;
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78444

    Onizuki
    Member

    Thank you

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.