CSS
- 3 ответа
- 0 вопросов
1
Вклад в тег
<div class="flex">
<button class="btn btn--primary">Log in</button>
<button class="btn btn--outline">Registration</button>
<button class="btn btn--outline">Forgot password</button>
<button class="btn btn--outline">Forgot password</button>
</div>*{
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.btn {
border: none;
background-color: transparent;
font-family: inherit;
padding: 10px 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn--primary {
color: #fff;
background-color: #000;
}
.btn--outline {
color: #000;
background-color: #fff;
border: 1px solid #000;
}<div class="popup-subscribe__box popup-subscribe__box-name">
<label class="popup-subscribe__label" for="popup-subscribe__name">Enter your name</label>
<input class="popup-subscribe__input" id="popup-subscribe__name" type="text" name="Name" placeholder="Anastasiia" required>
<span></span>
</div>span {
position: relative;
}
span::after {
content: "+";
position: absolute;
top: 0;
right: 17px;
transition: all ease-in 0.3s;
transform: scale(0);
background-color: #1ED760;
}
.popup-subscribe__input:valid + span::after {
transform: scale(1);
}