<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>

        .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;        }