<body>
    <div class="form-container">
      <div class="upper-bracket bracket">
        {
      </div>
      <form class="login__form" action="#">
        <div class="field-container">
          <label for="email" class="start-form-label">
            email <span> : </span></label
          >
          <div class="input-container">
            <input type="text" class="start-form-input" id="email" /><span>,</span>
          </div>
        </div>
        <div class="field-container ">
          <label for="password" class="start-form-label">
            password <span style="padding=2px"> : </span></label
          >
          <div class="input-container">
            <input type="password" class="start-form-input" id="pass" /><span> ,</span>
          </div>
        </div>

        <div class="field-container form-submit">
          <input
            id="submit"
            class="login__form_submit"
            type="submit"
            value=". . . login"
          />
        </div>
      </form>
      <div class="lower-bracket bracket">
        }
      </div>
    </div>
  </body>
@import url(https://fonts.googleapis.com/css?family=Righteous|Roboto&display=swap);

* {
  box-sizing: border-box;
}

body {
  background: whitesmoke;
/*   background-image : linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url('https://pixy.org/src/474/4745483.png'); */
  font-family: Righteous;
  font-size: 30px;
  display : flex;
  flex-direction :column;
  justify-content:center;
  align-items : center;
}

.form-container {
  width: 100%;
  background:white;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-shadow : 1px 1px 5px 4px rgba(56, 56, 56, 0.36);
  padding : 3rem;
}

.login__form {
  padding-left: 5rem;
  width: 100%;
}

.field-container {
  display: flex;
  padding-top: 1rem;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

input {
  cursor: text;
}

.start-form-label {
  width: 30%;
}

.input-container {
  width: 21rem;
  display: flex;
  flex-direction :row;
  flex-wrap: nowrap;
  justify-content : space-around;
}

.start-form-input {
  display: inline-block;
  border: transparent;
  height: 2.5rem;
  font-family: Roboto;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  padding: 0.3rem;
  border-radius: 3px;
  line-height: 1rem;
  box-shadow: 1px 1px 5px 1px rgba(56, 56, 56, 0.36);
  transition: 0.3s ease-in;
}

.start-form-input:focus {
  transform: scale(1.02);
}

.start-form-input::before {
  content: " : ";
}

.start-form-input[type="password"] {
  letter-spacing: 2px;
  font-size: 4rem;
}

.bracket {
  padding-bottom: 3rem;
  padding-top: 3rem;
  color: black;
  font-size: 3rem;
  opacity: 0.5;
}

.form-submit{
  padding-top : 3rem;
}

.login__form_submit{
  background : transparent;
  font-size : 1.5rem;
  font-family : inherit;
  border: transparent;
  padding-top: 1rem;
  border : 4px solid red;
  letter-spacing : 1px;
  transition : 0.5s ease-in-out;
  margin : 2px;
  display:inline-block;
  border-radius : 3px;
  box-shadow : 1px 1px 5px 3px rgba(56, 56, 56, 0.36);
}


.login__form_submit:hover{
  background-color: red;
  transform : scale(1.05);
  box-shadow : 1px 1px 10px 3px rgba(56, 56, 56, 0.36);
  color: white;
  cursor:pointer;
  
}
.login__form_submit:focus{
  background-color: red;
  transform : scale(1.05);
  box-shadow : 1px 1px 10px 3px rgba(56, 56, 56, 0.36);
  color: white;
  cursor:pointer;
}

.login__form_submit:active{
  background-color: red;
  transform : scale(1);
  box-shadow : 1px 1px 5px 3px rgba(56, 56, 56, 0.36);
  color: white;
  cursor:pointer;
}
/***
Pens that can help in design

https://codepen.io/logeekal/pen/bPqZRW

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.