• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Create mouse hover effect for button using CSS sprite

By Abhishek Ghosh March 24, 2011 9:34 pm Updated on March 24, 2011

Create mouse hover effect for button using CSS sprite

Advertisement

You must have noticed buttons in various websites that change its appearance on mouse hover. Typical example is the download buttons in Mozilla Firefox website’s download link. Below is a tutorial to create one such button, on mouse hover the button changes its color from blue to red.

 

We need few things in hand: couple of buttons (one for before hover and one after hover). You can download such a set of buttons in PSD (Photoshop file) format from our download section for free. If you do not know how to use Photoshop (or do not have it); you can follow this tutorial on how to create basic 3D shapes in Windows 7 MS Paint.

 

So, after this step, you will get two set of buttons, exactly the same in size :

Advertisement

---

 

mouse hover effect for button

 

Now, we need to create CSS sprite of these images. CSS sprite is nothing but combining two images into one single image; CSS will direct which part of the image will be used for which action.

Creating CSS sprite is easy. Just go to some free online service that provides such work to do. We have used CSS Sprite Generator website to illustrate the method. You have to upload two images: first the normal and then the hover one; then click the Generate button. After few seconds you will get link to download this combined image (that is the sprite) and our required CSS code. Rename the sprite as “Download-button” for this tutorial. After practice, you can create other buttons of your own. For the above two images, we got this as a sprite:

 

mouse hover effect for button using CSS sprite

 

Basically this CSS code will only say you specific position of the buttons; it is not the full CSS code we need. Here is the full CSS code (for the button we have used):

 

Vim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/***** Download-button ********************/
a.rollover {
display: block;
width: 203px;
height: 70px;
text-decoration: none;
background: url("images/Download-button.png");
background-position: 0px 0px;
}
a.rollover:hover {
background-position: 0px -80px;
}
.displace {
position: absolute;
left: -5000px;
} 

 

We have marked the codes with different colors which you need to change.

width and height: It is simply the dimension of one individual button. To know this dimension; simply right click on any of your button images (not the sprite!) in Windows 7 and click Properties. In the Properties dialog box, go to Details tab and you will get the dimension. Replace with our digits with your digits. Do everything in Notepad, not in Wordpad or Word. For Mac, just clicking and selecting it will show the dimension on right hand panel.

background: url: It is simply the root relative url ( root is css ) of your image sprite. Upload to whereever you want and put the url there.  For self hosted WordPress blogs / sites; you can use url in the form we have used. Others can put the full url (with http) there.

background-position: You will get that value from CSS sprite generator website. Just replace it. Do not copy-paste the whole CSS from there.

 

Put the completed CSS code to your CSS file (better to put at the end, if you mess something, you can find it out easily!) ; for Bloggers, go to HTML editor, put this code where all CSS codes ends and HTML codes begins (generally in the middle part). Though there is no hard and fast rule, it is better to keep the things tidy.

Save the CSS file (or HTML editor in case of Blogger).

Now, go to write a new post (use HTML mode). This is the required xHTML code:

 

Vim
1
<a class="rollover" title="Download-button" href="your target url here"><span class="displace">Download-button</span></a>

 

Replace the text “your target url here” with the link url you want and the text “Download-button”  with the text you want to appear in case the image load is off in user’s browser (or can not load due to low bandwidth, mobile devices etc.). Save it. Only the text will appear when you switch from HTML to Visual mode (in WordPress). Click “Preview” and you will get your custom button with hover effect.

This article is written in 2011 !

This quite older guide intended for xHTML. Obviously the method will work with HTML5 and CSS3 too. However, we can not provide live demo (as our current CSS is different). We used this button once for our website. You can go to Wayback Machine (search on Google) and find our website’s old appearance.

 

For advanced users: You can set the position of the button from the last parameter of the CSS code.
Note for Windows users: When copy-pasting the the xHTML code, after pasting sometimes class=”rollover” and span class=”displace” disappears; to avoid this, copy the code then paste to Notepad, again copy from Notepad and paste to your website’s writing panel in HTML mode. Check if it disappears or not! If still disappears, manually type the codes. Otherwise, obviously it will not work.

Updated on April 2014

Now we can use HTML5, CSS3 and Icon-Font. That is more smart way.

For example, in Colored Tick Mark post we have shown how to use Icon-Font with colored appearance. So, you probably love to read Using Icon-Font with WordPress. We can render the icon easily, like this clip icon :

We can make it red :

Default, example :

Additionally, performing a search on this website can help you.

We can exclude from the hyperlink :

You can make the fonts in Data URI format like we do for fonts

Also, HTML5 will normally give nice button if we define in CSS3, like we have al around this website. There is no image but pure CSS.
As were talking about how to create mouse hover effect for button using CSS sprite, we are not discussing the Icon-Font part here.

Tagged With create button code with hovering , creating an image sprite with hover , css code for hover sprites , css create a button that changes on hover , how to create android hover on buttons , how to create hover buttons in wordpress , how to use mousehover for button , html create button with hover

This Article Has Been Shared 818 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Create mouse hover effect for button using CSS sprite

  • Making of WordPress theme : softwares and browsers addons

    List of the most useful tools needed for designing and coding a Wordpress theme.

  • Customize the logo of your WordPress login page : second method

    Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the functions.php file of your theme. Finally, a website that is more professional and close to your brand.

  • How to get different theme for different category in WordPress

    You might want to use different theme for different category in your Wordpress blog, here is how you can apply so.

  • 30 ways to increase the readability of your blog

    One of the most important aspect in the design of a blog is readability, how easy it is to read your content. People come to your blog to read articles, and if they are easier to read, the better.

  • Customize the width of body and sidebar of WordPress blog

    You can easily customize your Wordpress theme’s width of content area and sidebar widget area by manipulating the CSS file.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Comments

  1. AvatarAlbert says

    May 4, 2011 at 9:06 pm

    I notice that in IE the rollover image shifts 1 pixel. It looks fine in FF, Safari and Chrome. Is there a fix?
    Thanks.

  2. AbhishekAbhishek says

    May 4, 2011 at 10:08 pm

    IE 6 like few problems are back in new form IE 8 (I HOPE they will be in IE 9, I have not tested) causing headache of the webmasters and developers.
    I have to write a few things before starting the IE fix sad songs.
    There was a fix for IE 6 (which MS claimed as the best browser ago) but that does not work for IE 7 or IE 8. People “discovered” another fix for IE 7, that does not work in IE 8. Now IE 9 (Beauty of the ? ) : I must admit, I found no fix anywhere. Now the sad song starts:

    1. IE 6: add

    a:hover {zoom:1;}

    2. IE 7:

    They says in MSDN blogs hover things will only work on xHTML STRICT declaration in the header as W3C says STRICT is better than TRANSITIONAL.

    3. IE 8 (may or may not work for IE 7):

    Add this before background url starts defining hover:

    filter: none !important;

    So the thing for hover becomes:

    .yournicebutton:hover {
    filter: none !important;
    background: url(images/yournicebutton.png); background-position: 0px -80px;

    }

    4. Other things:

    You can use the same background color of the button in addition to hide the bald area. For unknown reasons (to me) IE loves gif; no problem occurs with gif. These are exclusive with transparent png.

    As your website is about business it is a serious affair. Try to use CSS solid color or gradient (we will write soon) to create button effects.

  3. Avatarlizardwijanarko says

    August 8, 2011 at 11:28 am

    Here only 2 button, hover and normal button. If we want to add one more button eg clicked button (normal, hover and when we press the button) how to do that? I want to use it on my blogger web, thanks

  4. AbhishekAbhishek says

    August 8, 2011 at 4:43 pm

    You want to add three states : Normal, Hover and Active. That is the same like above. Just you need to define the CSS property of hover state.

    1.Create one image sprite with three button images instead of two like above.

    2. add one additional :

    a.rollover:active {
    background-position: 0px -xypx;
    }

    You can add another : a.visited. For example, once clicked it become dimmed.

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023
  • How to Do Electrical Layout Plan for Adding Smart Switches January 26, 2023
  • What is a Data Mesh? January 25, 2023
  • What is Vehicular Ad-Hoc Network? January 24, 2023
  • Difference Between Panel Light, COB Light, Track Light January 21, 2023

About This Article

Cite this article as: Abhishek Ghosh, "Create mouse hover effect for button using CSS sprite," in The Customize Windows, March 24, 2011, January 29, 2023, https://thecustomizewindows.com/2011/03/create-mouse-hover-effect-for-button-using-css-sprite/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT