"CTA Button With Separator"
Bootstrap 3.3.0 Snippet by girliestgeek

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--CTA BTN--> <a type="button" href="#" class="btn split-btn"> <p class="split-btn-name">Enter Your CTA Here</p> <span class="separator"></span> <p class="split-btn-icon">›</p> </a> <!--CTA BTN-->
.btn.split-btn, .btn.split-btn:hover, .btn.split-btn:active, .btn.split-btn:focus {height: 54px; border: 1px solid #333; background:#777; border-radius:0; font-weight: normal; color: #003E7E; text-align: right; line-height: 12px; width: 250px; padding: 0px !important;} .separator {content: ''; display: inline-block; background: #333; margin: 0; height: 52px; width: 1px; vertical-align: top;} .split-btn-name{padding: 10px 15px; font-weight:400; font-size:18px; color:#fff; display: inline-block; margin:0 auto;} .split-btn-icon{display: inline-block; padding:15px 17px; text-align: center; font-size: 30px; font-weight:700; color:#fff;}

Related: See More


Questions / Comments: