Створимо компонент кнопки primary
SASS
.buttons-wrap {
display: flex;
justify-content: center;
}
.button-wrap {
max-width: 360px;
& + & {
margin-left: 20px;
}
}
.button {
width: 100%;
&.is-primary {
padding: 30px;
border: 4px solid #1db954;
border-radius: 12px;
font: 500 18px/24px sans-serif;
color: #fff;
background-color: #1db954;
outline: none;
transition: all ease-out 0.3s;
cursor: pointer;
&:hover,
&:focus {
border-color: #33ff7a;
color: #33ff7a;
background-color: #111112;
}
}
&.has-icon {
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrap {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
}
.spotify-icon,
.music-icon {
width: 24px;
height: 24px;
}
css
.buttons-wrap {
display: flex;
justify-content: center;
}
.button-wrap {
max-width: 360px;
}
.button-wrap + .button-wrap {
margin-left: 20px;
}
.button {
width: 100%;
}
.button.is-primary {
padding: 30px;
border: 4px solid #1db954;
border-radius: 12px;
font: 500 18px/24px sans-serif;
color: #fff;
background-color: #1db954;
outline: none;
transition: all ease-out 0.3s;
cursor: pointer;
}
.button.is-primary:hover,
.button.is-primary:focus {
border-color: #33ff7a;
color: #33ff7a;
background-color: #111112;
}
.button.has-icon {
display: flex;
align-items: center;
justify-content: center;
}
.button .icon-wrap {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.button .icon-wrap:first-child {
margin-right: 8px;
}
.button .icon-wrap:last-child {
margin-left: 8px;
}
.spotify-icon,
.music-icon {
width: 24px;
height: 24px;
}