src/components/UI/Button/SignUp/SignUp.scss
@import "../../../../assets/sass/main.scss";
.SignUp-btn {
background-color: $color-white;
color: $color-dark-blue;
font-weight: 700;
padding: .8em;
border-radius: .3em;
cursor: pointer;
transition: all 0.2s;
user-select: none;
text-align: center;
&:hover {
box-shadow: 0 1px 1.2rem $color-black;
transform: translateY(-.2rem);
}
&:active {
box-shadow: 0 1px .5rem $color-black;
transform: translateY(.2rem);
}
}
.large {
width: 27rem;
margin-top: 2.5rem;
font-size: 2rem;
}
@media (max-width:600px) {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
.large {
margin-top: 2.5rem;
font-size: 1.4rem;
width: 19rem;
}
}
@media (min-width:600px) and (max-width:800px) {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
.large {
margin-top: 2.5rem;
font-size: 1.8rem;
width: 24rem;
}
}
.small {
margin-left: 1.5rem;
}
@media (max-width:480px) {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
.small {
font-size: 1.1rem;
width: 16rem;
margin-left: .4rem;
}
}
@media (min-width:480px) and (max-width:720px) {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
.small {
font-size: 1.4rem;
width: 20rem;
}
}