CSS Button Hover Effect (Border Change, Background Change) Not Working - html

Question

I'm new to programming. I'm interested in recreating the button effect from this codepen example. Codepen
When I copy the code from codepen and try to run the code in my Chrome browser, the button 1) did not have the border effect, 2) was not positioned in the middle of the screen, and 3) the background change effect did not show up.
Here is the code I try to run in my browser, which I borrow from this codepen aforementioned. Codepen
CSS
$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; }
HTML
<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>
JavaScript
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"]');
Help is greatly appreciated. Thank you everyone!

Answer 1

the css you copied are some sort of SASS i think, you need to copy the compiled version of css
http://codepen.io/cdunnnnnnn/pen/FLsvf in the css column, there is a button say "view compiled", click on that and copy css again.
.btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-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;
}
body:after {
content: "";
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;
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,
.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: #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;
}

Answer 2

You need to compile the SCSS code into pure CSS!
DEMO
// 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');
}
});
*/
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-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;
}
body:after {
content: "";
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;
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,
.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: #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;
}
<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>