Эффект наведения кнопки CSS (изменение границы, смена фона) Не работает

Question

Я новичок в программировании. Я заинтересован в воссоздании эффекта кнопки из этого примера кода. Codepen

Когда я копирую код из кодефа и пытаюсь запустить код в браузере браузера Chrome, кнопка 1) не имела эффекта границы, 2) не располагалась посередине экрана, а 3) эффект изменения фона не появился.

Вот код, который я пытаюсь запустить в своем браузере, который я заимствую из этого кодекса, упомянутого выше. 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"]'); 

Помощь очень ценится. Всем спасибо!

Answer 1

CSS-скопированный являются своего рода SASS я думаю, вам нужно скопировать скомпилированную версию CSS

http://codepen.io/cdunnnnnnn/pen/FLsvf в столбце CSS, есть кнопка сказать «вид скомпилированный», нажмите на это и копии css снова.

.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

Вам необходимо скомпилировать код SCSS в чистый 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>