<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <div class="container"> <div class="row"> <button type="button" class="btn bg-blue fs-it-btn"> <i class="fa fa-plus" aria-hidden="true"></i> <span class="fs-it-btn-vertical-line"></span> Click me</button> </div> </div>

.fs-it-btn { margin-top: 10px; border: 1px solid #a2a2a2; border-radius: 0; color: #fff; font-weight: bold; } .fs-it-btn-vertical-line { text-align:center; padding: 4px 0 5px 10px; margin-left: 10px; border-left: 1px solid #a2a2a2; } .bg-blue { background-color: #2c9deb; } .text-uppercase { text-transform: uppercase; }