rxHTMLButton Plugin

rxHTMLButton 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.

by jay prakash

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600&display=swap" rel="stylesheet">

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

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

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



<div class="main-container">
	<div class="inline left">
		<a class="alink" href="javascript:void(0)">Hover Me</a>
		<a class="alink2" href="javascript:void(0)">Hover Me</a>
		<a class="alink3" href="javascript:void(0)">Hover Me</a>
		<a class="alink4" href="javascript:void(0)">Hover Me</a>
		<br /><br /><br />
		<a class="alink5" href="javascript:void(0)">Hover Me</a>
		<a class="alink6" href="javascript:void(0)">Hover Me</a>
		<a class="alink7" href="javascript:void(0)">Hover Me</a>
		<a class="alink8" href="javascript:void(0)">Hover Me</a>
		<br /><br /><br />
		<a class="alink9" href="javascript:void(0)">Hover Me</a>
		<a class="alink10" href="javascript:void(0)">Hover Me</a>
		<a class="alink11" href="javascript:void(0)">Hover Me</a>
		<a class="alink12" href="javascript:void(0)">Hover Me</a>
		<br /><br /><br />
		<a class="alink13" href="javascript:void(0)">Hover Me</a>
		<a class="alink14" href="javascript:void(0)">Hover Me</a>
		<a class="alink15" href="javascript:void(0)">Hover Me</a>
		<a class="alink16" href="javascript:void(0)">Hover Me</a>
		<br /><br /><br />
		<a class="alink17" href="javascript:void(0)">Hover Me</a>
		<a class="alink18" href="javascript:void(0)">Hover Me</a>
		<a class="alink19" href="javascript:void(0)">Hover Me</a>
		<a class="alink20" href="javascript:void(0)">Hover Me</a>
	</div>
  
  
  
	<div class="inline right">
		<header>
			<div class="header-container">
				<div class="header-top"><a href="http://www.roxunlimited.com" style="border:0 none"><img...

CSS

.blue {
	color: #115782;
}

.bold {
	font-weight: bold;
}

.font-18 {
	font-family: "Roboto Slab", Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-decoration: none;
}

.font-20 {
	font-family: "Roboto Slab", Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-decoration: none;
}

.font-24 {
	font-family: "Roboto Slab", Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-decoration: none;
}

.header-bottom {
	padding-bottom: 10px;
	text-align: center;
}

.header-contact-container {
	font-size: 0;
	position: relative;
}

.header-contact-container.phone {
	margin-bottom: 15px;
}

.header-contact-icon {
	display: inline-block;
	vertical-align: top;
}

.header-contact-icon.email {
	margin-top: -1px;
}

.header-contact-icon.phone {
	margin-top: 1px;
}

.header-contact-text {
	display: inline-block;
	margin-left: 10px;
	vertical-align: top;
}

.header-container {
	background-color: #115782;
	padding: 30px 10px;
	position: relative;
	z-index: 2;
}

.header-top {
	padding-bottom: 20px;
	text-align: center;
}

.inline {
	display: inline-block;
	padding: 20px;
	vertical-align: top;
	width: 40%;
}

.inline.left {
}

.link-line {
	text-align: center;
}

.main-container {
	margin: auto;
	text-align: center;
}

.normal {
	font-weight: normal;
}

.rx-parent {
	display: inline-block;
	margin: 5px 10px;
}

.text-line {
	line-height: 30px;
	margin: 20px 0 30px 0;
	text-align: center;
}

.white {
	color: #FFF;
}

JavaScript

$(document).ready(function() {
	$(".alink").rxHtmlButton({
		customArrow: true
	});
  
	$(".alink2").rxHtmlButton({
		backgroundColor: "#E05A00",
		backgroundHoverColor: "#1F00B4"
	});
  
	$(".alink3").rxHtmlButton({
		backgroundColor: "#C0006E",
		gradientFrom: "left",
		gradientIntensity: 50
	});
  
	$(".alink4").rxHtmlButton({
		backgroundColor: "#009E03",
		customText: true,
		customTextval: "Move On"
	});
  
	$(".alink5").rxHtmlButton({
		backgroundColor: "#C67700",
		customFont: true,
		customFontStyle: "poppins",
		customFontWeight: 300,
		roundedCorner: "full"
	});
  
	$(".alink6").rxHtmlButton({
		backgroundColor: "#649E00",
		customFont: true,
		customFontStyle: "poppins",
		customFontWeight: 300,
		roundedCorner: "full",
		customArrow: true,
		customArrowStyle: "double"
	});
  
	$(".alink7").rxHtmlButton({
		backgroundColor: "#BA0900",
		customFont: true,
		customFontStyle: "poppins",
		customFontWeight: 300,
		roundedCorner: "full",
		customArrow: true,
		customArrowStyle: "jet",
		blackOverlay: true
	});
  
	$(".alink8").rxHtmlButton({
		backgroundColor: "#008BB5",
		customFont: true,
		customFontStyle: "poppins",
		customFontWeight: 300,
		roundedCorner: "full",
		customArrow: true,
		customArrowStyle: "jet",
		blackOverlay: true,
		customFontHoverColor: "#8AD4EB"
	});
  
	$(".alink9").rxHtmlButton({
		backgroundColor: "#635C9C",
		roundedCorner: "squircle"
	});
  
	$(".alink10").rxHtmlButton({
		backgroundColor: "#3A8733",
		roundedCorner: "squircleAlt"
	});
  
	$(".alink11").rxHtmlButton({
		backgroundColor: "#743980",
		roundedCorner: "calendar"
	});
	$(".alink12").rxHtmlButton({
		backgroundColor: "#872729",
		roundedCorner: "oval"
	});
  
	$(".alink13").rxHtmlButton({
		backgroundColor: "#3985A8",
		customSize: "small"
	});
  
	$(".alink14").rxHtmlButton({
		backgroundColor: "#969934",
		customSize: "big"
	});
  
	$(".alink15").rxHtmlButton({
		backgroundColor: "#6A267A",
		customSize: "small",
		roundedCorner: "full"
	});
 ...