Gradient Color Background Plugin For jQuery - Add Shine

Add Shine is a simple jQuery plugin for converting a solid background color into a gradient that simulates a subtle shine on that color.  Add Shine is good for quickly adding some polish to prototypes or demos, and it makes it easy to change colors because you only need to change a single background color.

How to use it:

1. Include jQuery Library and Add Shine.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script src="js/addShine.js"></script>

2. Call the plugin

<script>

$(function() {
	
	$("body").addShine();
	
	$("button").addShine();
	//$("button#tarball").addShine(.5);
	
	$(window).bind("load resize",function() {
		$(".content").css("paddingBottom","0px");
		var browserHeight = $(window).height();
		var contentHeight = $(".content").height();
		if (browserHeight > contentHeight) {
			$(".content").css("paddingBottom",browserHeight-contentHeight+"px");
		}
	});
	
});

</script>

3. CSS

<style>
a {
text-decoration: none;
color: rgba(255,255,255,1);
}
body {
background: rgba(100,100,100,1);
color: rgba(255,255,255,1);
text-shadow: 0 2px 1px rgba(0,0,0,1);
}
button {
border: none;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
min-width: 30%;
height: 100%;
}
button a {
color: #fff;
text-shadow: 0 1px 1px rgba(100,100,100,.7);
padding: 20px;
display: block;
}
.col {
width: 50%;
}
 @media only screen and (max-width: 800px) {
.col {
width: 100%;
}
}
</style>

4. Markup

<button type="button" style="background:#036;">
<a href="https://www.jqueryscript.net" onClick="_gaq.push(['_trackEvent', 'Downloads', 'Click', 'Zip']);">jQueryScript.Net</a>
</button>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.