IBEX
  • Home
  • Tech Department
  • Software Developers
  • Electronic Designers
  • Product Design
☰
  • Home
  • Tech Department
  • Software Developers
  • Electronic Designers
  • Product Design
  • Web & Cloud Development
  • AI Integration
  • Mobile App Development
  • FAQ
  • About Us
  • Contact Us
  • Portfolio
  • Resources
  • Under the Hood
  • News

Cloud Development

Our resources for other developers, designers and engineers.

Cloud Development

Rollover buttons

/CSS /Rollover buttons

 

Based on this guide

http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript

Create your image double height with the roll over image in the bottom half

In the <head>

<style type="text/css">
a.myrollover {
  display: block;
  width: 80px;
  height: 30px;
  background-image: url('button_combined.png');
}

a.myrollover:hover {
  background-position: center bottom;
}
</style>

Then for your link

<a href="#" class="myrollover"></a>

open all | close all

❯ Other IBEX Resources

Home | Terms & Conditions | Privacy Policy
© Copyright IBEX Technology Ltd. All rights reserved. IBEX is a registered trademark of IBEX Technology Ltd.
Footer Logo