<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <section class="offer">
    <div class="container">
      <div class="offer-form">
        <form action="#" onsubmit="return ValidateForm()">
          <label class="offer-form-label" for="offer-input">Укажите Ваш телефон <br>для связи и нажмите скачать:</label>
          <div class="offer-wrap">
            <input autocomplete="off" required class="offer-form-input form-input" id="offer-input" type="phone">
            <button onclick="document.getElementById('link').click()" id="btn-down" class="offer-form-btn" href="#">Скачать бриф-анкету</button>
            <a href="brif.pdf" download="" hidden="" id="link"></a>
          </div>
        </form>
        <p class="form-text">Нажимая на кнопку, вы принимаете <a href="#">Положение  и Согласие</a> на обработку персональных данных.</p>
      </div>
    </div>
  </section>
  
  
</body>
</html>
body {
  padding: 50px;
  margin: 50px;
  font-family: sans-serif;
  background: #ebebeb;
}


.offer-title h2{
    color: #151515;
    font-size: 31px;
    font-weight: bold;
    letter-spacing: 2.64px;
}

.offer-title p{
   color: #151515;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: 1.2px;
}


.offer-form-label {
    color: #151515;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    line-height: 1.3;
}
.offer-form-input {
    display: block;
    width: 100%;
    margin-bottom: 22px;
}

.form-input {
    font-size: 17px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #222;
    padding: 0 0 20px 11px;
    z-index: 2;
    position: relative;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    outline: none;
    width: 10%;
}


.offer-form {
  width: 100%;
}
.offer-form-btn {
    box-shadow: 5px 5px 8px rgba(255, 243, 36, 0.34);
    border-radius: 7px;
    background-color: #fff324;
    background-image: linear-gradient(45deg, rgba(255, 243, 36, 0.61) 0%, rgba(255, 243, 36, 0) 100%);
    padding: 17px 21px;
    border: none;
    outline: none !important;
    transition: all 0.5s;
    cursor: pointer;
    overflow: hidden !important;
}
.offer-form-btn:hover {
    background-color: #fff324!important;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 144, 0, 0) 0, rgba(255, 144, 0, .61) 100%)!important;
    background-image: -o-linear-gradient(45deg, rgba(255, 144, 0, 0) 0, rgba(255, 144, 0, .61) 100%)!important;
    background-image: linear-gradient(45deg, rgba(255, 144, 0, 0) 0, rgba(255, 144, 0, .61) 100%)!important
}


.offer-form-btn img {
    margin-right: 15px;
}

.offer-form .form-text {
    font-size: 11px;
    font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.