<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 ----------> <!-- Extra code, do not imcluded with buttons --> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <a href="http://www.rowbootstrap.com/outlined-flat-buttons/" class="btn text-center btn-white" data-wow-delay="0.7s">download this Bootstrap Outlined Flat Buttons</a> </div> </div> </div> <!-- Buttons code start from here --> <div class="container-fluid padding-50"> <div class="row"> <div class="col-lg-12"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <h4 class="margin-bottom-50">General Buttons to <br>match with Theme Color</h4> <p> <a href="#" class="btn btn-outlined btn-theme btn-lg" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-theme" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-theme btn-sm" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-theme btn-xs" data-wow-delay="0.7s">Purchase Now</a> </p> </div> </div> </div> </div> </div> </div> <div class="container-fluid secondary-bg padding-50"> <div class="row"> <div class="col-lg-12"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <h4 class="margin-bottom-50 text-color-theme">Black Buttons</h4> <p> <a href="#" class="btn btn-outlined btn-black btn-lg" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-black" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-black btn-sm" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-black btn-xs" data-wow-delay="0.7s">Purchase Now</a> </p> </div> </div> </div> </div> </div> </div> <div class="container-fluid theme-bg padding-50"> <div class="row"> <div class="col-lg-12"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <h4 class="margin-bottom-50 text-color-white">White Buttons</h4> <p> <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-white" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-white btn-sm" data-wow-delay="0.7s">Purchase Now</a> </p> <p> <a href="#" class="btn btn-outlined btn-white btn-xs" data-wow-delay="0.7s">Purchase Now</a> </p> </div> </div> </div> </div> </div> </div>

/* ========================== Template name: Outlined Flat Buttons Version: 1.0 Author: RowBootstrap Author website: http://www.rowbootstrap.com/ ========================== */ /* ====================x============= Basic Styling ================================= */ body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; color: #000000; background: #FFFFFF; } /* Text colors */ .text-color-white { color: #FFFFFF; } .text-color-black { color: #000000; } .text-color-theme { color: #6f5499; } /* Background colors */ .theme-bg{ background: #6f5499; } .bg-black{ background: #000000; } .secondary-bg { background: #f0ecf6; } /* Margin */ .margin-bottom-0 { margin-bottom: 0 !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-15 { margin-bottom: 15px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-50 { margin-bottom: 50px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-70 { margin-bottom: 70px !important; } .margin-bottom-80 { margin-bottom: 80px !important; } .margin-bottom-90 { margin-bottom: 90px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .margin-bottom-120 { margin-bottom: 120px !important; } .margin-right-0 { margin-right: 0 !important; } .margin-right-5 { margin-right: 5px !important; } .margin-right-10 { margin-right: 10px !important; } /* Padding surround */ .padding-0 { padding: 0px !important; } .padding-30 { padding: 30px !important; } .padding-50 { padding: 40px !important; } /* Buttons */ .btn { letter-spacing: 1px; text-decoration: none; background: none; -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; display: inline-block; margin-bottom: 0; vertical-align: middle; white-space: nowrap; font-size:14px; line-height:20px; font-weight:700; text-transform:uppercase; border: 3px solid; padding:8px 20px; radius:40px; } .btn-outlined { border-radius: 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-outlined.btn-theme { background: none; color: #6f5499; border-color: #6f5499; } .btn-outlined.btn-theme:hover, .btn-outlined.btn-theme:active { color: #FFF; background: #6f5499; border-color: #6f5499; } .btn-outlined.btn-black { background: none; color: #000000; border-color: #000000; } .btn-outlined.btn-black:hover, .btn-outlined.btn-black:active { color: #FFF; background: #000000; border-color: #000000; } .btn-outlined.btn-white { background: none; color: #FFFFFF; border-color: #FFFFFF; } .btn-outlined.btn-white:hover, .btn-outlined.btn-white:active { color: #6f5499; background: #FFFFFF; border-color: #FFFFFF; } .btn-xs{ font-size:11px; line-height:14px; border: 1px solid; padding:5px 10px; } .btn-sm{ font-size:12px; line-height:16px; border: 2px solid; padding:8px 15px; } .btn-lg{ font-size:18px; line-height:22px; border: 4px solid; padding:13px 40px; }