<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 ----------> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <span> Content here, content here. </span> </button>

button[ aria-expanded="true"] { background: linear-gradient(to bottom, #ff6000 10%, #fc0a59 100%); border-radius: 8px; color: #000; display: inline-block; font-size: 16px; padding: 1px; text-decoration: none; } button[ aria-expanded="true"] span { background: #fff; display: block; padding: 12px 12px; border-radius: 6px; }