.atuin-btn {
    display: inline-flex;
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #FFFFE0;
    font-weight: bold;
    text-transform: uppercase; 
    font-family: 'Roboto', Тahoma, sans-serif;
    background: #337AB7;
    cursor: pointer; 
    border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
    color: #FFFFE0;
}
.atuin-btn:before, 
.atuin-btn:after {
    content: "";
    border: 4px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;    
}
.atuin-btn:before {
    top: -6px;
    left: -6px;
}
.atuin-btn:after {
    bottom: -6px;
    right: -6px;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-top-color: #337AB7;
    border-right-color: #337AB7;
    transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-bottom-color: #337AB7;
    border-left-color: #337AB7;
    transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}