ChrisMartino Posted January 4, 2010 Share Posted January 4, 2010 Hey there i am wanting to create custom hover buttons were when you hover your mouse over they change similar to this website http://nanoimg.com/ (Yes i know the owner is on these forums , Nice site ) But how would i do buttons like that blue one, were when you hover over it, it changes like that? Quote Link to comment Share on other sites More sharing options...
Adam Posted January 4, 2010 Share Posted January 4, 2010 There's loads of methods to creating roll over images, CSS solutions being the most popular these days. This looks like a decent guide: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/ Quote Link to comment Share on other sites More sharing options...
ChrisMartino Posted January 4, 2010 Author Share Posted January 4, 2010 Brilliant!, Thanks. Quote Link to comment Share on other sites More sharing options...
ChrisMartino Posted January 4, 2010 Author Share Posted January 4, 2010 Ok, So i have a problem, The buttons aren't appearing, Heres my HTML page: <html> <link rel="stylesheet" href="images/style.css" type="text/css" /> <center> <a href="#" class="rollover" title="uploadbutton"></a> </center> </html> And heres my style sheet a.rollover { display: block; width: 150px; height: 44px; text-decoration: none; background: url("images/upload_button.png"); } a.rollover:hover { background-position: -150px 0; } .displace { position: absolute; left: -5000px; } Any ideas why it wont appear?. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 5, 2010 Share Posted January 5, 2010 Though this is not directly related, you should avoid using elements such as center, and your HTML is also invalid, read: An Introduction to CSS Always remember to properly structure your code, and include a valid doctype. How to create the buttons, depends on what they are used for. For navigation, you can use anchors just fine. But if you do that for submit forms, then you need to use JavaScript, which generally should be avoided for layout purposes. Another way is to use the button element, and throw in an image, or set the width, height, and background to that of your button-image. Here's an example using background colors, you can easily change the colors to background images, and then enhance its appearance with the hover pseudo-class. <!DOCTYPE html> <html> <head> <title>BlueBodens Hover Bottons</title> <style type="text/css"> * {margin:0;padding:0;} li a { display: block; width: 100%; height:1em; background: #404040; color: #ffffff; text-decoration: none; border: 1px solid #404040; padding: 0.2em; } li a:hover { background: #808080; } li {margin: 1em 0;list-style: none;} button { width: 100px; height: 55px; background: #404040; float: left; clear: both; margin: 1em 0; } input, label { float: left; } #Basement { width: 75%; min-width: 768px; max-width: 1600px; margin: 1em auto; } #ContentBox1 { width: 15%; float: left; } #ContentBox2 { width: 80%; float: right; } </style> </head> <body> <div id="Basement"> <div id="ContentBox1"> <ul> <li><a href="">Test Link</a></li> <li><a href="">Test Link</a></li> </ul> </div> <div id="ContentBox2"> <form action="action.php" method="post"> <label>Feild 1:</label><input type="text" name="feild1"> <button type="submit">Submit</button> </form> </div> </div> </body> </html> If you want to remove something from the layout, then you'll likely find display: none; to be better suited then absolute positions. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 6, 2010 Share Posted January 6, 2010 At the end of the day, you'll reconsider and entirely drop the idea of "custom" blue icons for the buttons. CSS support is poor when it comes to form elements, especially custom submit buttons. Keep it simple and use an input tag for the submit button. Trust me, I was there. Here's why: You need to create a new image for every new submit button. You will need to add a hidden span in the button so search engines and text browser understand what that is etc. You get the idea. Just warning you... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.