內容簡介
使用背景圖片和純 CSS3 的動畫效果創建可適應手機的按鈕。當用戶將滑鼠懸停在按鈕上方時,會顯示按鈕標題和子標題。建議用於頁面或區域鏈接。
自定義背景懸停效果的顏色和不透明度,更改默認按鈕大小並包含自定義 CSS 代碼。
將短碼添加到您的頁面或文章中以創建按鈕。
按鈕快速鍵選項:
title:按鈕標題,它是一個 h3 元素。
subtitle:當用戶將滑鼠懸停在按鈕上方時顯示。
link:按鈕鏈接。
image:背景圖像連接。
width:按鈕寬度。
height:按鈕高度。
例子
多個響應式按鈕:
[hover-image-row]
[hover-image-button title="第 1 區" subtitle="這是一個驚人的區域" link="http://my-section-link" image="http://my-image-link" ]
[hover-image-button title="第 2 區" subtitle="進入此處以獲得更多信息" link="http://my-section-link" image="http://my-image-link" ]
[hover-image-button title="第 3 區" subtitle="這是最好的區域" link="http://my-section-link" image="http://my-image-link" ]
[/hover-image-row]
單個按鈕示例:
[hover-image-button title="第 1 區" subtitle="這是一個驚人的區域" link="http://my-section-link" image="http://my-image-link" ]
外掛標籤
開發者團隊
原文外掛簡介
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" ]
