100 Buttons 057

button{
    outline: none;
    cursor: pointer;
    display: block;
    position: relative;
    top: 0;
    text-align: center;
    padding: 1em 2.5em;
    border: 2px solid #e85e00;
    color: #e85e00;
    background-color: transparent;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1;
    transition: all .2s ease;

}

button:focus,
button:hover{
    animation-name: shake;
    animation-duration: 100ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
}

@-webkit-keyframes shake {
    0% {transform: translate(0px, 0px) rotate(0deg);}
    2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
    4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
    12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
    14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
    18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
    20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
    24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
    26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
    28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
    38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
    50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
    56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
    58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
    60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
    68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
    70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
    74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
    76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
    82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
    86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
    96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}

@-moz-keyframes shake {
    0% {transform: translate(0px, 0px) rotate(0deg);}
    2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
    4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
    12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
    14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
    18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
    20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
    24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
    26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
    28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
    38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
    50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
    56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
    58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
    60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
    68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
    70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
    74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
    76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
    82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
    86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
    96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}

@keyframes shake {
    0% {transform: translate(0px, 0px) rotate(0deg);}
    2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
    4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
    12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
    14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
    18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
    20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
    24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
    26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
    28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
    34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
    36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
    38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
    46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
    50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
    54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
    56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
    58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
    60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
    62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
    66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
    68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
    70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
    72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
    74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
    76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
    80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
    82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
    86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
    88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
    90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
    92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
    94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
    96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
    98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}