Multi featured jQuery powered HTML5 Button plugin for Websites

contact for website design and development services

Contact No.

+91 7978662048

email for website development or redesign work

Email ID

contact@roxunlimited.com

Currencies

INR

USD

rx html5 button plugin service banner border

professional website design and development banner border

responsive web design banner drop shadow

Professional HTML5 Button Plugin

rx HTML Button Plugin will work in almost every HTML tag. This will smoothly work on 'a href link', 'button type button', 'input type button', 'input type submit', 'div tag' or even 'p tag'. The implementation time is less than 5 minutes, just link rx HTML5 Button Plugin source codes through CDN or direct to your website and get awesome looking HTML5 buttons. This Plugin is made with 'CSS3 Flex Technology', 'HTML5 Pseudo Elements and Selectors' and 'jQuery Library'. It is tested in all the latest versions of 'IE Edge', 'IE Explorer (10 and latest)', 'Firefox', 'Chrome' and 'Opera' browsers.

Video Demonstration

View in Code PlayGround

CodePen

JSFiddle

JS Bin

Download

CDN Links

<link href="https://roxunlimited.github.io/rxHtmlButtonLibrary/jquery-rxHtmlButton-0.3-min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://roxunlimited.github.io/rxHtmlButtonLibrary/jquery-rxHtmlButton-0.3-min.js"></script>

Download from GitHub

Installation

Hover Me

HTML Header Section

Link jQuery 1.12.4 CDN

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Link rxHTMLButton Plugin v0.3

<link href="xxx/jquery-rxHtmlButton-0.3-min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="xxx/jquery-rxHtmlButton-0.3-min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".alink").rxHtmlButton();
	});
</script>

HTML Body Section

<a class="alink" href="javascript:void(0)">Hover Me</a>

Customization

Gradient Fill

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		backgroundColor: "#B83B79"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#B83B79",
		gradientIntensity: 60
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#B83B79",
		backgroundBlendColor: "#FF794D",
		gradientFrom: "left"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#B83B79",
		backgroundBlendColor: "#FF794D",
		backgroundHoverColor: "#260C19",
		backgroundBlendHoverColor: "#FF4000"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#B83B79",
		gradient: false,
	});
});

Hover Me

Border Styles

Hover Me

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		backgroundColor: "#338014",
		borderWidth: 2
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#338014",
		borderWidth: 2,
		borderIntensity: 40
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#338014",
		borderHoverWidth: 3
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#338014",
		borderWidth: 2,
		borderColor: "#BBFF29",
		borderHoverColor: "#0C7009"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#338014",
		border: false
	});

});

Font, Arrow and Shapes

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		backgroundColor: "#7A4709",
		customText: true,
		customFontStyle: "poppins",
		customFontWeight: 300,
		customFontSize: 16
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#7A4709",
		customText: true,
		customArrow: true,
		customArrowStyle: "bullet"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#7A4709",
		customText: true,
		customArrow: true,
		customSize: "small"
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#7A4709",
		customText: true,
		customArrow: true,
		roundedCorner: "full"
	});
});

Hover Me

Hover Effects

Hover Me

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		backgroundColor: "#006F73",
		customText: true,
		customArrow: true,
		hoverExpand: true
	});

	$(".alink").rxHtmlButton({
		backgroundColor: "#006F73",
		customFontColor: "#FFD969",
		customFontHoverColor: "#52FFB4",
		customText: true,
		customArrow: true,
		hoverExpand: true,
		blackOverlay: true
	});
});

Built-in Themes

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		builtinTheme: "rx01"
	});

	$(".alink").rxHtmlButton({
		builtinTheme: "rx02"
	});

	$(".alink").rxHtmlButton({
		builtinTheme: "rx03"
	});

	$(".alink").rxHtmlButton({
		builtinTheme: "rx04"
	});

	$(".alink").rxHtmlButton({
		builtinTheme: "rx05"
	});
});

Hover Me

Full Keywords List

backgroundColor: String with Hash and HEX code

Default value: "#2176B8"

backgroundHoverColor: String with Hash and HEX code

Default value: ""

gradient: Boolean (true|false)

Default value: true

gradientFrom: String with fix keywords ("top" | "bottom" | "left" | "right")

Default value: "top"

backgroundBlendColor: String with Hash and HEX code

Default value: ""

backgroundBlendHoverColor: String with Hash and HEX code

Default value: ""

gradientIntensity: Integer (0 - 100)

Default value: 30

border: Boolean (true | false)

Default value: true

borderWidth: Integer (0 - 100)

Default value: 1

borderHoverWidth: Integer (0 - 100)

Default value: null

borderColor: String with Hash and HEX code

Default value: ""

borderHoverColor: String with Hash and HEX code

Default value: ""

borderIntensity: Integer (0 - 100)

Default value: 5

customText: Boolean (true | false)

Default value: false

customTextval: String

Default value: "Let's Go"

customFont: Boolean (true | false)

Default value: true

customFontStyle: String with fix keywords ("exo" | "firasans" | "livvic" | "muli" | "poppins" | "raleway" | "roboto")

Default value: "raleway"

customFontColor: String with Hash and HEX code

Default value: ""

customFontHoverColor: String with Hash and HEX code

Default value: ""

customFontWeight: Integer with fix keywords (300 | 400 | 500 | 600 | 700 | 800 | 900)

Default value: 600

customFontSize: Integer (0 - 100)

Default value: 15

customArrow: Boolean (true | false)

Default value: false

customArrowStyle: String with fix keywords ("bullet" | "double" | "jet" | "machine" | "sign" | "thick" | "thin")

Default value: "jet"

blackOverlay: Boolean (true | false)

Default value: false

roundedCorner: String with fix keywords ("big" | "calendar" | "full" | "none" | "oval" | "small" | "squircle" | "squircleAlt")

Default value: "small"

hoverExpand: Boolean (true | false)

Default value: false

customSize: String with fix keywords ("small" | "medium" | "big")

Default value: "medium"

animate: Boolean (true | false)

Default value: true

builtinTheme: String with fix keywords ("rx01" | "rx02" | "rx03" | "rx04" | "rx05")

Default value: ""

Connect with us

If you require any kind of website related services, feel free to contact us for a quote. We will reach out to you as quickly as possible.

Name :

Contact No. :

Email ID :

Website Link (if any) :

Message :

Captcha :

More Services

We are providing a plethora of services to meet all types of website design, development, marketing and enhancement requirements. If you do not find the service you are looking for, you can leave a message through 'Connect with us' above. For more details of services, click any one of the below links to visit their page.