Как копировать анимированную кнопку CSS3?

Question

Я пытаюсь воспроизвести анимированную кнопку CSS3 с веб-сайта, на котором я нахожусь. У меня есть большая часть стиля работы, помимо собственно анимации.

Here is the button. Я пытаюсь сделать звезду, то есть третья секция, образующая дно с зеленым фоном. Снимок ниже.

HTML:

<button id="BUTTON_1"> 
    Fav 
</button> 

CSS:

#BUTTON_1 { 
    box-shadow: rgb(17, 158, 77) 0px 5px 0px 0px; 
    color: rgb(255, 255, 255); 
    cursor: pointer; 
    height: 50px; 
    letter-spacing: 1px; 
    position: relative; 
    text-transform: uppercase; 
    width: 60px; 
    perspective-origin: 30px 25px; 
    transform-origin: 30px 25px; 
    background: rgb(23, 170, 86) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(255, 255, 255); 
    border-radius: 7px 7px 7px 7px; 
    font: normal normal bold 0px/normal Lato, Calibri, Arial, sans-serif; 
    margin: 15px 30px; 
    outline: rgb(255, 255, 255) none 0px; 
    padding: 25px 30px; 
    transition: all 0.3s ease 0s; 
} 

#BUTTON_1:after { 
    color: rgb(255, 228, 77); 
    cursor: pointer; 
    display: block; 
    height: 50px; 
    left: 0px; 
    letter-spacing: 1px; 
    opacity: 0; 
    position: absolute; 
    speak: none; 
    top: 0px; 
    visibility: hidden; 
    width: 60px; 
    z-index: 1; 
    align-items: stretch; 
    align-self: flex-start; 
    perspective-origin: 30px 25px; 
    transform: matrix(4, 0, 0, 4, 0, 0); 
    transform-origin: 30px 25px; 
    content:''; 
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(255, 228, 77); 
    font: normal normal normal 26px/54px icomoon; 
    margin: 0px; 
    outline: rgb(255, 228, 77) none 0px; 
    padding: 0px; 
    transition: none 0s ease 0s; 
} 

#BUTTON_1:before { 
    color: rgb(255, 255, 255); 
    cursor: pointer; 
    display: block; 
    height: 50px; 
    left: 0px; 
    letter-spacing: 1px; 
    position: absolute; 
    speak: none; 
    top: 0px; 
    width: 60px; 
    backface-visibility: hidden; 
    align-items: stretch; 
    align-self: flex-start; 
    perspective-origin: 30px 25px; 
    transform-origin: 30px 25px; 
    content:''; 
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(255, 255, 255); 
    font: normal normal normal 26px/54px icomoon; 
    margin: 0px; 
    outline: rgb(255, 255, 255) none 0px; 
    padding: 0px; 
} 

.#BUTTON_1:before { 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #fff; 
} 

.#BUTTON_1:after { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    font-size: 26px; 
    line-height: 54px; 
    color: #ffe44d; 
    visibility: hidden; 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #ffe44d; 
    -webkit-transform: scale(4); 
    -moz-transform: scale(4); 
    -ms-transform: scale(4); 
    transform: scale(4); 
    opacity: 0; 
    -webkit-transition: none; 
    -moz-transition: none; 
    transition: none; 
} 

.#BUTTON_1.btn-activated:after { 
    visibility: visible; 
    -webkit-animation: dropDown 0.3s forwards; 
    -moz-animation: dropDown 0.3s forwards; 
    animation: dropDown 0.3s forwards; 
} 

@-webkit-keyframes dropDown { 
    to { 
     opacity: 1; 
     -webkit-transform: scale(1); 
    } 
} 

@-moz-keyframes dropDown { 
    to { 
     opacity: 1; 
     -moz-transform: scale(1); 
    } 
} 

@keyframes dropDown { 
    to { 
     opacity: 1; 
     transform: scale(1); 
    } 
} 

Demo of my attempt

Не беспокоит шрифт (как вы можете видеть, в моем примере не установлен шрифт), сразу после анимации, работающей над кнопкой. Я пробовал найти все ключевые фреймы и стили, которые прилагаются, но я все еще не могу заставить его работать.

Что мне не хватает, чтобы получить эту работу?

Answer 1

class="btn-activated" is missing in <button id="BUTTON_1" class="btn-activated"> 

И удалить точку,

.#BUTTON_1.btn-activated:after { 
(In all cases .#BUTTON_1) 

в

#BUTTON_1.btn-activated:after { 

JQuery

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$('document').ready(function(){ 
    $('#BUTTON_1').click(function(){ 
    $(this).addClass('btn-activated'); 
    });  
}); 
</script> 

В вашем скрипку выберите JQuery в Каркасы & Расширения

И В Javascipt баре

Вставить это

$('document').ready(function(){ 
    $('#BUTTON_1').click(function(){ 
    $(this).addClass('btn-activated'); 
    });  
}); 

И

<button id="BUTTON_1" class="btn-activated"> 

в

<button id="BUTTON_1">