Здравствуйте! Подскажите, пожалуйста, что нужно написать, чтобы кнопка "Сохранить изменения" отображалась не слева а справа в форме?
<!DOCTYPE html>
<html>
<head>
<title>Авторизация и регистрация</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" class="form">
<h1 class="form_title">Редактирование</h1>
<div class="form_group">
<input type="text" class="form_input" placeholder=" ">
<label for="" class="form_label">Email</label>
</div>
<div class="form_group">
<input type="text" class="form_input" placeholder=" ">
<label for="" class="form_label">Пароль</label>
</div>
<button class="form_button">Сохранить изменения</button>
</form>
<script src="my.js"></script>
</body>
</html>
body{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form{
width: 300px;
padding: 32px;
border-radius: 10px;
box-shadow: 0 4px 16px #ccc;
font-family: sans-serif;
letter-spacing: 1px;
position: absolute;
}
.form_input,
.form_button{
font-family: sans-serif;
letter-spacing: 1px;
font-size: 16px;
}
.form_title{
text-align: center;
margin:0 0 42px 0;
font-weight: normal;
caret-color: transparent;
}
.form_group{
position: relative;
margin-bottom: 32px;
}
.form_label{
position: absolute;
top:0;
z-index: -1;
color: #9e9e9e;
transition: 0.3s;
}
.form_input {
width: 100%;
padding: 10px;
border: none;
border-bottom: 1px solid #e0e0e0;
background-color: transparent;
outline: none;
transition: 0.3s;
}
.form_input:focus{
border-bottom: 1px solid #1a73a8;
}
.form_button{
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
background-color: #0071f0;
outline: none;
cursor: pointer;
transition: 0.3s;
caret-color: transparent;
}
.form_button:focus,
.form_button:hover{
background-color: rgba(0,113,240,0.7);
}
.form_label{
top: -18px;
font-size:12px;
}
https://codepen.io/pen/