Lifted from
A Pen by Christopher Dunn on CodePen.
<!-- http://uxeast.org --> | |
<a class="btn" data-js="btn"> | |
<span class="btn-inr"> | |
<span class="txt-a">See this button?</span> | |
<span class="txt-b">Now ya do.</span> | |
</span> | |
</a> |
// http://shoptalkshow.com/episodes/134-marc-grabanski/#t=16:07 | |
// vanilla JS | |
function toggleButton(el) { | |
var body = document.body; | |
var element = document.querySelector(el); | |
element.addEventListener('mouseenter', function(e) { | |
e.target.classList.add('active'); | |
body.classList.add('blur'); | |
}, false); | |
element.addEventListener('mouseleave', function(e) { | |
e.target.classList.remove('active'); | |
body.classList.remove('blur'); | |
}, false); | |
}; | |
toggleButton('[data-js="btn"]'); | |
// jQuery | |
/* | |
$('[data-js="btn"]').hover(function(){ | |
$(this).toggleClass('active'); | |
if ($(this).hasClass('active')) { | |
$('body').addClass('blur'); | |
} else { | |
$('body').removeClass('blur'); | |
} | |
}); | |
*/ |
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js"></script> |
$alizarin: #e74c3c; | |
%vertical-align { | |
position: relative; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
*, | |
*::before, | |
*::after { 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(http://magdeleine.co/wp-content/uploads/2015/01/tongariro-national-park-493289-1400x933.jpg) no-repeat center center; | |
background-size: cover; | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
display: block; | |
width: 100%; | |
height: 100%; | |
background: linear-gradient(135deg, #2980b9 0%,#9B59B6 100%); | |
background-size: 100% auto; | |
opacity: 0; | |
transition: all .65s ease-in-out; | |
} | |
} | |
.blur:after { opacity: .85; } | |
.btn { | |
position: relative; | |
display: inline-block; | |
border: 6px solid lighten($alizarin, 10%); | |
@extend %vertical-align; | |
transition: all .1s ease-in-out; | |
z-index: 99; | |
&.active { box-shadow: 2px 2px 4px rgba(0,0,0, .25); } | |
&:focus, | |
&:hover { border: 12px solid $alizarin; } | |
} | |
.btn, | |
.btn > span { | |
cursor: pointer; | |
} | |
.btn > span { | |
min-width: 426px; | |
} | |
.btn-inr { | |
display: inline-block; | |
color: white; | |
font-weight: 100; | |
font-size: 2em; | |
line-height: 1; | |
text-transform: uppercase; | |
background: lighten($alizarin, 10%); | |
padding: 1em 2em; | |
margin: 6px; | |
transition: all .1s ease-in-out; | |
&:focus, | |
&:hover { | |
background: $alizarin; | |
padding: 1em 2em; | |
margin: 0; | |
} | |
} | |
.txt-a { | |
display: inline; | |
} | |
.txt-b { | |
display: none; | |
} | |
.btn:focus .btn-inr, | |
.btn:hover .btn-inr { | |
background: $alizarin; | |
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; } |
<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" /> |