This time I will share jQuery Plugin and tutorial about Attractive Call to Action Buttons In jQuery – rxHTMLButton, hope it will help you in programming stack.
rxHTMLButton is a jQuery based button generator that helps developers create unique designs for your CTA buttons to grab user’s attention.
With this plugin, you can quickly create animated, interactive, customizable call to action buttons from any HTML elements like a, button, input, span, etc.
More Features:
- Subtle hover effects.
- Change button text on hover.
- Custom color, text, size, border.
- Arrow icons to improve click-through rate.
- 5 built-in themes.
How to use it:
1. Insert the& jQuery rxHTMLButton plugin’s files into the document.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<link href="/path/to/jquery-rxHtmlButton-min.css" rel="stylesheet" /> |
3 |
<script src="/path/to/jquery-rxHtmlButton-min.js"></script> |
2. Create a basic CTA button on the page.
1 |
<a class="alink" href="#">Hover Me</a> |
1 |
$(".alink").rxHtmlButton(); |
3. Apply a pre-built theme to the button. Accept values: ‘rx01’, ‘rx02’, ‘rx03’, ‘rx04’, ‘rx05’.
1 |
$(".alink").rxHtmlButton({ |
4. Or customize the button with the following options.
01 |
$(".alink").rxHtmlButton({ |
04 |
backgroundColor: "#2176B8", |
07 |
backgroundHoverColor: "", |
11 |
backgroundBlendColor: "", |
13 |
backgroundBlendHoverColor: "", |
14 |
gradientIntensity: 30, |
22 |
borderGradientFrom: "top", |
25 |
borderBlendHoverColor: "#168C36", |
30 |
customTextval: "Let's Go", |
34 |
customFontStyle: "raleway", |
36 |
customFontHoverColor: "", |
44 |
customArrowStyle: "jet", |
46 |
// enable black overlay |
49 |
// "big" | "calendar" | "full" | "none" | "oval" | "small" |
50 |
roundedCorner: "small", |
52 |
// expand the button on hover |
55 |
// "small" | "medium" | "big" |
Changelog:
2021-03-02
