<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form action="#" method="post"> <h2 class="text-center">Sign Up</h2> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" class="form-control" required placeholder="Votre nom"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" id="email" class="form-control" required placeholder="Votre email"> </div> <div class="form-group"> <label for="passw">Password</label> <input type="password" name="passw" id="passw" class="form-control" required placeholder="Password"> </div> <div class="form-group"> <label for="passw1"> Repeat Password</label> <input type="password" name="passw1" id="passw1" class="form-control" required placeholder="Repeat Password"> </div> <button type="submit" class="form-control">Submit</button> </form> </div>

*{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; } body{ background-color: teal; height: 100vh; display: flex; align-items: center; justify-content: center; } form { width: 300px; margin: 0 auto; border-radius: 4px; background-color: white; padding: 20px; } form .form-group { margin-bottom: 10px; display: block; } label { display: block; } input, button{ width: 100%; outline: none; border: 1px solid #333; border-radius: 3px; padding: 10px 0; } button { background: none; border: 3px solid #d35400 !important; text-transform: uppercase; font-size: 16px; font-weight: 600; color: #d35400 !important; border-radius: 0; position: relative; cursor: pointer; } button::before, button::after { content: ''; width: 14px; height: 3px; background: white; position: absolute; transform: skewX(50deg); transition: .4s linear; } button::before { top: -3px; left: 10%; } button::after { bottom: -3px; right: 10%; } button:hover::before { left: 80%; } button:hover::after { right: 80%; }