button fx

This topic is: resolved

Tagged: 

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

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

    Onizuki
    Member
    Post count: 15

    hallo

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

    thanks

    #78335

    nutsandbolts
    Moderator
    Post count: 3130

    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
    Post count: 15

    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 9 months, 1 week ago by  Onizuki.
    • This reply was modified 9 months, 1 week ago by  Onizuki.
    #78431

    nutsandbolts
    Moderator
    Post count: 3130

    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
    Post count: 15

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

    #78440

    nutsandbolts
    Moderator
    Post count: 3130

    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
    Post count: 15
    #78442

    nutsandbolts
    Moderator
    Post count: 3130

    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
    Post count: 15

    Thank you

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

You must be logged in to reply to this topic.