jQuery+CSS3打造超酷3D按钮效果

jquery代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
</script>
<script>
    $(document).ready(function() {
        // Demo #1		
        // Find the link with an ID of 'tutorial-toggle' and listen for when it is clicked
        $("a#tutorial-toggle").click(function() {
            // When it get's clicked, toggle the class 'on'
            $(this).toggleClass("on");

            // If the class 'on' was added...
            if ($('a#tutorial-toggle').hasClass('on')) {
                // Then fade in all the dots
                $(this).text('on');
                $('a.dot').fadeIn();
            }
            // Otherwise, the class 'on' must have been removed, so...
            else {
                // Fade the dots out
                $(this).text('off');
                $('a.dot').fadeOut();
            }
            return false;
        });

        // Demo #2		
        $("a#long-toggle").click(function() {
            $(this).toggleClass("on");

            if ($('a#long-toggle').hasClass('on')) {
                $(this).text('Click to turn tutorial mode off');
                $('a.dot2').fadeIn();
            } else {
                $(this).text('Click to turn tutorial mode on');
                $('a.dot2').fadeOut();
            }
            return false;
        });

    });
</script>