Hover Image Button

Create mobile responsive image buttons with pure CSS3 animated hover effects.

Author:Ignacio Pérez (profile at wordpress.org)
WordPress version required:3.5.1
WordPress version tested:4.3.1
Plugin version:1.1.2
Added to WordPress repository:02-11-2015
Last updated:11-11-2015
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:100
Rated by:2
Plugin URI:
Total downloads:9 942
Active installs:1 000+
plugin download
Click to start download

Create mobile responsive buttons with background images and pure CSS3 animated on hover effects. Include a button title and a subtitle that appears when the user move the mouse hover the button. Recommended to be used as a page or sections links.

Customize the color and the opacity of the background on hover effect, change the default buttons size and include your custom CSS code.

Add the shortcodes to your page or post to create the buttons.

Button shortcut Options:

  • title: title of the button, it is a h3 element.
  • subtitle: appears when the user move the mouse hover the button.
  • link: button link.
  • image: background image link.
  • width: button width.
  • height: button height.

Examples

Multiple reponsive buttons:

[hover-image-row]
    [hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" ]
    [hover-image-button title="Section 2" subtitle="Enter here for more info" link="http://my-section-link" image="http://my-image-link" ]
    [hover-image-button title="Section 3" subtitle="This is the best section" link="http://my-section-link" image="http://my-image-link" ]
[/hover-image-row]

Single button example:

[hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" ]

Screenshots
FAQ
ChangeLog