A jquery-based button

A jquery-based button

I have previously shared many buttons for implementing css3. Today I will share with you a jquery-based beautiful button. This button uses an image in the background. When the mouse passes, the background is covered with a translucent div. Let's take a look:

Download Online Preview source code

Implementation code.

Html code:

 <a class="btn" data-js="btn"><span class="btn-inr"><span class="txt-a">See This Button?</span>        <span class="txt-b">Now You do.</span> </span></a>    <script src='jquery.js'></script>    <script src='StackBlur.js'></script>    <script>        $('[data-js="btn"]').hover(function (e) {            $(this).toggleClass('active');            if ($(this).hasClass('active')) {                $('body').addClass('blur');            } else {                $('body').removeClass('blur');            }            e.preventDefault();        }); //@ sourceURL=pen.js    </script>

Css code:

        .btn        {            position: relative;            top: 50%;            -webkit-transform: translateY(-50%);            -ms-transform: translateY(-50%);            transform: translateY(-50%);        }                *, *::before, *::after        {            -moz-box-sizing: border-box;            box-sizing: border-box;        }                html, body        {            width: 100%;            height: 100%;        }                body        {            position: relative;            font-family: "Lato" , "Avant Garde" , Avantgarde, "Century Gothic" , CenturyGothic, "AppleGothic" , sans-serif;            font-weight: 300;            text-align: center;            overflow: hidden;            background: url(1.jpg) no-repeat center center;            background-size: cover;        }        body::after        {            position: absolute;            top: 0;            left: 0;            display: block;            width: 100%;            height: 100%;            background: -webkit-linear-gradient(315deg, #2980b9 0%, #9B59B6 100%);            background: linear-gradient(135deg, #2980b9 0%, #9B59B6 100%);            background-size: 100% auto;            content: "";            opacity: 0;            -webkit-transition: all .65s ease-in-out;            transition: all .65s ease-in-out;        }                .blur::after        {            opacity: .85;        }                .btn        {            position: relative;            display: inline-block;            border: 6px solid #ed7669;            -webkit-transition: all .1s ease-in-out;            transition: all .1s ease-in-out;            z-index: 99;        }        .btn.active        {            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);        }        .btn:focus, .btn:hover        {            border: 12px solid #e74c3c;        }                .btn > span        {            min-width: 425px;            cursor: pointer;        }                .btn-inr        {            display: inline-block;            color: white;            font-weight: 100;            font-size: 2em;            line-height: 1;            text-transform: uppercase;            background: #ed7669;            padding: 1em 2em;            margin: 6px;            -webkit-transition: all .1s ease-in-out;            transition: all .1s ease-in-out;        }        .btn-inr:focus, .btn-inr:hover        {            background: #e74c3c;            padding: 1em 2em;            margin: 0;        }                .txt-a        {            display: inline;        }                .txt-b        {            display: none;        }                .btn:focus .btn-inr, .btn:hover .btn-inr        {            background: #e74c3c;            padding: 1em 2em;            margin: 0;        }                .btn:focus .txt-a, .btn:hover .txt-a        {            display: none;        }                .btn:focus .txt-b, .btn:hover .txt-b        {            display: inline;        }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/8990

JQuery designs the following button styles

This is not just the background image of the button. In addition, you can set the style. If you need to click the drop-down button, add a DIV below using js.

Use buttons in jQuery to change the text to be displayed.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">