100 Buttons 048

button{
    outline: none;
    cursor: pointer;
    display: block;
    text-align: center;
    border: none;
    color: #FF9900;
    background: transparent;
    font-family: monospace;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    transition: color .5s ease;
}

button:focus,
button:hover{
    color: #FFF;
    -webkit-animation: glow 1.5s ease-in-out infinite alternate;
    -moz-animation: glow 1.5s ease-in-out infinite alternate;
    animation: glow 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes glow{
    from{
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
    to{
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }
}

@-moz-keyframes glow{
    from{
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
    to{
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }
}

@keyframes glow{
    from{
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
    to{
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }
}