A beautiful button based on jquery

Before you shared a lot of CSS3 implementation of the button. Today, we share a beautiful button based on jquery. A picture is used in the background of this button. The background is obscured by a translucent div when the mouse passes over it. Look together:

Online preview Source Download

The implemented code.

HTML code:

 <aclass= "BTN"Data-js= "BTN"><spanclass= "Btn-inr"><spanclass= "Txt-a">See this Button?</span>        <spanclass= "Txt-b">Now, do.</span> </span></a>    <Scriptsrc= ' Jquery.js '></Script>    <Scriptsrc= ' 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: -;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:. the; }. 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: About; }. 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: -;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, reproduced please specify the original address: http://www.w2bc.com/Article/8990

A beautiful button based on jquery