form

<!DOCTYPE html>
<html>
<body>
<form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h2>Контакты</h2>
        </li>
        <li>
            <label for="name">Ваше имя:</label>
            <input type="text"  placeholder="Иванов Иван" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="ivanov@example.com" required />
        </li>
        <li>
            <label for="message">Сообщение:</label>
            <textarea name="message" cols="40" rows="6" required ></textarea>
        </li>
        <li>
            <a href="#" class="knopka">Отправить</a>
        </li>
    </ul>
</form>
<style>

*:focus {outline: none;}

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

/* === стили list === */
.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

/* === заголовок === */
.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

/* === стили элементов формы === */
.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form a {margin-left:156px; }

    .contact_form input, .contact_form textarea {
        border:1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        padding-right:30px;
        -moz-transition: padding .25s;
        -webkit-transition: padding .25s;
        -o-transition: padding .25s;
        transition: padding .25s;
    }
    .contact_form input:focus, .contact_form textarea:focus {
        background: #fff;
        border:1px solid #555;
        box-shadow: 0 0 3px #aaa;
        padding-right:70px;
    }


.form_hint {
    background: #d45252;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999;
    position: absolute;
    display: none;
}
.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

/* === стили кнопки === */
a.knopka {
    color: #fff; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: #69FF42; /* фон кнопки */
  padding: .7em 1.5em; /* отступ от текста */
}
a.knopka:hover
{ background: #42FF76; }


</style>
</body>
</html>