Просто кнопка в стиле 3d

Живая кнопка в стиле 3d исключительно средствами CSS3

by Andrey Dobrovoi

HTML

<button class="btn">Кнопка</button>

CSS

@import  "https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic";

html,body {
    height: 100%;
}
body {
    margin: 0 auto;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    color: #333;
    background: -webkit-linear-gradient(90deg,#abbaab 10%,#fff 90%);
    background: -moz-linear-gradient(90deg,#abbaab 10%,#fff 90%);
    background: -ms-linear-gradient(90deg,#abbaab 10%,#fff 90%);
    background: -o-linear-gradient(90deg,#abbaab 10%,#fff 90%);
    background: linear-gradient(90deg,#abbaab 10%,#fff 90%);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Open Sans",sans-serif;
}

a {
    text-decoration: none;
}

.btn {
    text-transform: uppercase;
    text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
    letter-spacing: 2px;
    padding: 16px 24px;
    display: inline-block;
    cursor: pointer;
    font-size: 24px;
    color: #F0F0F0;
    border: none;
    outline: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-bottom: 4px solid #0045A6;
    -webkit-box-shadow: 6px 6px 6px #999;
    -moz-box-shadow: 6px 6px 6px #999;
    box-shadow: 6px 6px 6px #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: -webkit-linear-gradient(#00C8F8,#0067F7);
    background: -o-linear-gradient(#00C8F8,#0067F7);
    background: -moz-linear-gradient(#00C8F8,#0067F7);
    background: linear-gradient(#00C8F8,#0067F7);
    background-size: 1px 100px;
    -webkit-transition: background .05s linear;
    -moz-transition: background .05s linear;
    -o-transition: background .05s linear;
    transition:...