// === Btn === .btn { min-height: 42px; padding: 15px 20px; text-align: center; text-decoration: none; color: #1a549c; line-height: 8px; border: solid 2px #4f98e1; border-radius: 5px; background-color: transparent; outline: 0; font-weight: 400; overflow: hidden; position: relative; vertical-align: top; display: inline-block; transition: background-color 0.2s ease-out, border-color 0.2s ease-out; z-index: 1; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &:hover { color: #fff; background-color: #2585e3; } &:active { background-color: #1863c8; transition: none; } &:focus { box-shadow: 0 0 0 3px rgba(0, 109, 253, 0.25); } &--white { color: #fff; border-color: #fff; &:hover { background-color: rgba(255, 197, 197, 0.1); } &:active { background-color: rgba(0, 0, 0, 0.1); } } &--noBorder { color: #141714; border-color: transparent; &:hover { color: #141714; border-color: transparent; background-color: #eceef1; } &:active { border-color: transparent; background-color: #d4d6da; } &:focus { box-shadow: none; border-color: transparent; } } &--highlight { color: #9c1a1a; border: solid 2px #d08c8c; &:hover { color: #9c1a1a; background-color: rgba(255, 255, 255, 0.1); } &:active { background-color: rgba(0, 0, 0, 0.1); } &:focus { box-shadow: 0 0 0 3px rgba(208, 140, 140, 0.2); } } &--fill { color: #fff; background-color: #4f98e1; &:hover { background-color: #50a1e1; } &:active { background-color: #317ee1; } } &--full { width: 100%; } &.loading { background-size: 28px; color: transparent; cursor: wait; pointer-events: none; } } @media (min-width: 1024px) { .btn { &::after { content: ''; left: 0; bottom: 0; width: 40px; height: 120%; background: linear-gradient( -92deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) ); will-change: transform; transform: skewX(-45deg) translateX(-60px); position: absolute; z-index: 1; &:hover::after { width: 80px; opacity: 0; transform: skewX(-42deg) translateX(250px); transition: width 0.5s ease, transform 0.6s ease, opacity 0.5s ease-out; } } } }