How to make hover buttons?


Tags: html,css

Problem :

I want to make a CSS class so that i can use it like this

<input type="button" class="hoverbuttons">

So how do I make a class so that my button will hover?

I have two buttons already. Assuming those URLs to be URL1 and URL2 how can I make them hover-able using CSS?



Solution :

The easiest way is to use sprites. You'll need to change the <input> tags to <a> tags:

<style>

a.link1 {
display:block;
height:10px;
background:url(image.jpg) no-repeat 0 0;
}

a.link1:hover {
background:url(image.jpg) no-repeat 0 -10px;
}

</style>

<a href="URL1" class="link1">foo</a>

    CSS Howto..

    CSS: How do I keep the text from wreaking havoc on the layout?

    How do I keep my background image at the bottom of the page?

    How can I make my website width fit fully on iphone 5?

    How to use relative referencing in CSS files

    How can I edit CSS on an HTML tab?

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    How to position a vertical menu as nested
      under horizontal parent

    How I can overlap a DIV on to other DIV?

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    How do I put a horizontal line/border right in the middle of a table row?

    How to make css style on Google custom search engine

    How to set border's thickness in percentages?

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How to Get Fixed Children to Play Nicely with their Parents

    how to display labels inline with inputs, using w3.css

    how to get fixed header with css?

    How to get Width of html control (in pixel ) from charaters contained by that control

    How to place sticky footer div's next to each other when bottom:0 is set dynamically

    How to remove margin and padding from css table

    How Can I Remove a Surrounding DIV with jQuery?

    How to Format text boxes with Css

    How to make my first-child in css work properly?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How to draw a lens like circle on mouseover

    How can I center a graphic under a
      -based nav menu?

    xHTML/CSS: How to make inner div get 100% width - margins

    How do you position div's in html5? [closed]

    How to use array so i will get value either x[0] or x[1]

    How to change visibility of Calendar on textbox click