|
.btn { |
|
margin: 0 auto; |
|
display: block; |
|
position: relative; |
|
padding: 0.5em 1.5em 0.5em 1em; |
|
border-radius: 0.4em; |
|
font-size: 22px; |
|
-webkit-box-shadow: 0px 3px gray, 0px 4px #767676, 0px 5px #6c6c6c, |
|
0px 6px #626262, 0px 7px #585858, 0px 8px #4e4e4e, 0px 14px 6px -1px gray; |
|
box-shadow: 0px 3px gray, 0px 4px #767676, 0px 5px #6c6c6c, 0px 6px #626262, |
|
0px 7px #585858, 0px 8px #4e4e4e, 0px 14px 6px -1px gray; |
|
text-shadow: 0px 1px #fff, 0px -1px #262f33; |
|
background-color: #e8e8e8; |
|
-webkit-transition: 0.1s ease-in-out; |
|
-o-transition: 0.1s ease-in-out; |
|
transition: 0.1s ease-in-out; |
|
background-image: -webkit-linear-gradient( |
|
45deg, |
|
rgba(255, 255, 255, 0.2) 25%, |
|
transparent 25%, |
|
transparent 50%, |
|
rgba(255, 255, 255, 0.2) 50%, |
|
rgba(255, 255, 255, 0.2) 75%, |
|
transparent 75%, |
|
transparent |
|
); |
|
background-image: -o-linear-gradient( |
|
45deg, |
|
rgba(255, 255, 255, 0.2) 25%, |
|
transparent 25%, |
|
transparent 50%, |
|
rgba(255, 255, 255, 0.2) 50%, |
|
rgba(255, 255, 255, 0.2) 75%, |
|
transparent 75%, |
|
transparent |
|
); |
|
background-image: linear-gradient( |
|
45deg, |
|
rgba(255, 255, 255, 0.2) 25%, |
|
transparent 25%, |
|
transparent 50%, |
|
rgba(255, 255, 255, 0.2) 50%, |
|
rgba(255, 255, 255, 0.2) 75%, |
|
transparent 75%, |
|
transparent |
|
); |
|
background-size: 4px 4px; |
|
color: inherit; |
|
} |
|
@media (min-width: 480px) { |
|
.btn { |
|
font-size: 30px; |
|
// font-size: calc( 0.02375 * 100vw + 10.6px); |
|
} |
|
} |
|
@media (min-width: 1280px) { |
|
.btn { |
|
font-size: 41px; |
|
} |
|
} |
|
.btn span { |
|
position: relative; |
|
display: block; |
|
max-width: 400px; |
|
z-index: 2; |
|
font-weight: bold; |
|
text-align: center; |
|
text-transform: uppercase; |
|
line-height: 1; |
|
font-size: 18px; |
|
outline: none; |
|
} |
|
|
|
.btn:hover { |
|
color: #ff4d4d; |
|
} |
|
.btn:active { |
|
-webkit-transform: translate(0, 5px); |
|
-ms-transform: translate(0, 5px); |
|
transform: translate(0, 5px); |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
/* color: #ff0000; */ |
|
color: #fff; |
|
} |
|
.btn:focus, |
|
.btn:active, |
|
.btn:hover, |
|
a:focus { |
|
outline: none !important; |
|
} |
|
.btn--red { |
|
background-color: #443387; |
|
color: #fff; |
|
} |
|
.btn--red:hover { |
|
color: #fff; |
|
} |
|
.btn:after { |
|
content: ">"; |
|
position: absolute; |
|
display: block; |
|
right: 20px; |
|
top: 50%; |
|
-webkit-transform: translateY(-50%); |
|
-ms-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
padding-bottom: 5px; |
|
font-size: inherit; |
|
font-weight: 900; |
|
color: inherit; |
|
} |
|
.btn--small { |
|
font-size: 18px; |
|
} |
|
@media (min-width: 480px) { |
|
.btn--small { |
|
font-size: 20px; |
|
font-size: calc(0 * 100vw + 18px); |
|
} |
|
} |
|
@media (min-width: 1280px) { |
|
.btn--small { |
|
font-size: 18px; |
|
} |
|
} |
|
.btn--small:after { |
|
right: 10px; |
|
} |
|
|
|
.btn.active.focus, |
|
.btn.active:focus, |
|
.btn.focus, |
|
.btn:active.focus, |
|
.btn:active:focus, |
|
.btn:focus { |
|
outline: none; |
|
} |
