Contact Number+91 7978662048
Email IDcontact@roxunlimited.com
Skype IDrox_jay2009
Rxhtmlbutton Library
Multi featured HTML Button Library for your Website with CSS and jQuery implementation.

rxHTMLButton Library

Description

rxHTMLButton Library will work on almost every HTML tag. It will smoothly work on 'a href link', 'button type button', 'input type button', 'input type submit', 'div tag' or even 'p tag'. Implementation time is less than 5 minutes, just link HTML Button Library to your website and get awesome HTML buttons. This Library is made with 'CSS3 Flex', 'Pseudo Elements and Selectors' and 'jQuery 1.12.4'. It has tested in all latest version of 'IE Edge', 'IE Explorer > 10', 'Firefox', 'Chrome' and 'Opera' browsers.

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>

Direct Download Download from GitHub

Installation

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 Library v0.3

<link href="jquery-rxHtmlButton-0.3-min.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="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 Options
Gradient Fill
$(document).ready(function() {$(".alink").rxHtmlButton({backgroundColor: "#B83B79"});$(".alink").rxHtmlButton({backgroundColor: "#B83B79",gradientIntensity: 60});$(".alink").rxHtmlButton({backgroundColor: "#B83B79",backgroundBlendColor: "#FF794D",gradientFrom: "left"gradientFrom: "top:default", "bottom", "left", "right"});$(".alink").rxHtmlButton({backgroundColor: "#B83B79",backgroundBlendColor: "#FF794D",backgroundHoverColor: "#260C19",backgroundBlendHoverColor: "#FF4000"});$(".alink").rxHtmlButton({backgroundColor: "#B83B79",gradient: false,});});
Border Styles
$(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",customFontStyle: "exo", "firasans", "livvic", "muli", "poppins", "raleway:default", "roboto"customFontWeight: 300,customFontWeight: 300, 400 ... 800, 900customFontSize: 16});$(".alink").rxHtmlButton({backgroundColor: "#7A4709",customText: true,customArrow: true,customArrowStyle: "bullet"customArrowStyle: "bullet", "double", "jet:default", "machine", "sign", "thick", "thin"});$(".alink").rxHtmlButton({backgroundColor: "#7A4709",customText: true,customArrow: true,customSize: "small"customSize: "small", "medium:default", "big"});$(".alink").rxHtmlButton({backgroundColor: "#7A4709",customText: true,customArrow: true,roundedCorner: "full"roundedCorner: "big", "calendar", "full", "none", "oval", "small:default", "squircle", "squircleAlt"});});
Hover Effects
$(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"});});
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: ""

Donation for Future Updates