jonraasch/subtle-mouse-effects.html

## subtle-mouse-effects.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Subtle Mouse Effects</title>

<style type="text/css">
.subtle {
    -webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
    -moz-transition: background-color 500ms ease-in; /* FF3.7+ */
    -o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
    transition: background-color 500ms ease-in; /* futureproofing */
    background-color: #78776C;
    color: #BBBBAD;
}

.subtle:hover, .subtle:focus {
    background-color: #F6F7ED;
    color: #51514A;
}
</style>

</head>

<body>

<input class="subtle" type="text" />

<textarea class="subtle"></textarea>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
// make sure to execute this on page load
$(function() {
    // determine if the browser supports transition
    var thisStyle = document.body.style,
    supportsTransition = thisStyle.WebkitTransition !== undefined ||
        thisStyle.MozTransition !== undefined ||
        thisStyle.OTransition !== undefined ||
        thisStyle.transition !== undefined;

    // assign jQuery transition if the browser doesn't support
    if ( ! supportsTransition ) {
        var defaultCSS = {
            backgroundColor: '#78776C'
        },
        hoverCSS = {
            backgroundColor: '#F6F7ED'
        };

        // loop through each button
        $('.subtle').each(function() {
            var $subtle = $(this);

            // bind an event listener for mouseover and focus
            $subtle.bind('mouseenter focus', function() {
                $subtle.animate(hoverCSS, 500, 'swing' );
            });

            // bind the reverse for mouseout and blur
            $subtle.bind('mouseleave blur', function(ev) {
                if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false;

                $subtle.animate(defaultCSS, 500, 'swing' );
            });
        });
    }
});
</script>

</body>
</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>

	<title>Subtle Mouse Effects</title>

	<style type="text/css">
	.subtle {
	-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
	-moz-transition: background-color 500ms ease-in; /* FF3.7+ */
	-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
	transition: background-color 500ms ease-in; /* futureproofing */
	background-color: #78776C;
	color: #BBBBAD;
	}

	.subtle:hover, .subtle:focus {
	background-color: #F6F7ED;
	color: #51514A;
	}
	</style>

	</head>

	<body>

	<input class="subtle" type="text" />

	<textarea class="subtle"></textarea>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
	"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
	// make sure to execute this on page load
	$(function() {
	// determine if the browser supports transition
	var thisStyle = document.body.style,
	supportsTransition = thisStyle.WebkitTransition !== undefined \|\|
	thisStyle.MozTransition !== undefined \|\|
	thisStyle.OTransition !== undefined \|\|
	thisStyle.transition !== undefined;

	// assign jQuery transition if the browser doesn't support
	if ( ! supportsTransition ) {
	var defaultCSS = {
	backgroundColor: '#78776C'
	},
	hoverCSS = {
	backgroundColor: '#F6F7ED'
	};

	// loop through each button
	$('.subtle').each(function() {
	var $subtle = $(this);

	// bind an event listener for mouseover and focus
	$subtle.bind('mouseenter focus', function() {
	$subtle.animate(hoverCSS, 500, 'swing' );
	});

	// bind the reverse for mouseout and blur
	$subtle.bind('mouseleave blur', function(ev) {
	if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false;

	$subtle.animate(defaultCSS, 500, 'swing' );
	});
	});
	}
	});
	</script>

	</body>
	</html>