<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row d-flex justify-content-center mt-100"> <div class="col-md-8"> <div class="card"> <div class="card-header"> <div class="card-header-left"> <h5 class="text-center">Skew Buttons</h5> </div> </div> <div class="card-block text-center"> <button class="btn btn-primary btn-skew">Primary Button</button> <button class="btn btn-success btn-skew">Success Button</button> <button class="btn btn-info btn-skew">Info Button</button> <button class="btn btn-warning btn-skew">Warning Button</button> <button class="btn btn-danger btn-skew">Danger Button</button> </div> </div> </div> </div>

body { background-color: #BDBDBD } .mt-100 { margin-top: 100px } .card { border-radius: 5px; -webkit-box-shadow: 0 0 5px 0 rgba(43, 43, 43, .1), 0 11px 6px -7px rgba(43, 43, 43, .1); box-shadow: 0 0 5px 0 rgba(43, 43, 43, .1), 0 11px 6px -7px rgba(43, 43, 43, .1); border: none; margin-bottom: 30px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .card .card-header { background-color: transparent; border-bottom: none; padding: 20px; position: relative } .card .card-block { padding: 1.25rem } .btn.btn-skew { -webkit-transform: skew(-15deg); transform: skew(-15deg) } .btn { border-radius: 2px; text-transform: capitalize; font-size: 15px; padding: 10px 19px; cursor: pointer; color: #fff }