<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-primary-green-on-white coE-button"> Primary Green on White</button> <button class="btn-secondary-green-on-white coE-button"> Secondary Green on White</button> <button class="btn-primary-green-on-dark coE-button"> Primary Green on Dark</button> <button class="btn-primary-white-on-dark coE-button"> Primary White on Dark</button> <button class="btn-secondary-green-on-dark coE-button"> Secondary Green on Dark</button> <button class="btn-secondary-white-on-dark coE-button"> Secondary White on Dark</button>

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400;600;700;900&display=swap'); .coE-button { font-family: 'Titillium Web', sans-serif, 'FontAwesome' !important; font-size: 16px; font-weight: Bold; cursor: pointer; display: inline-block; text-align: center; padding: 8px 30px; border-radius: 67px; } .coE-button:hover { border-radius: 67px; } .coE-button[disabled] { background: #F2F2F2; color: #B3B3B3; border: 2px solid #F2F2F2; cursor: not-allowed; } .btn-primary-green-on-white { background: #4BCD3E; border: 2px solid #4BCD3E; color: #012834; } .btn-primary-green-on-white:hover { background: none; } .btn-primary-green-on-white:active { background: #4BCD3E; outline: none; color: #ffffff; } .btn-primary-green-on-dark { background: #4BCD3E; border: 2px solid #4BCD3E; color: #012834; } .btn-primary-green-on-dark:hover { background: none; color: #ffffff; } .btn-primary-green-on-dark:active, .btn-primary-white-on-dark:active { background: #ffffff; outline: none; color: #012834; } .btn-primary-white-on-dark { background: #ffffff; border: 2px solid #ffffff; color: #012834; } .btn-primary-white-on-dark:hover { background: none; color: #ffffff; } .btn-primary-green-on-white, .btn-primary-green-on-dark, .btn-primary-white-on-dark, .btn-secondary-green-on-white, .btn-secondary-green-on-dark, .btn-secondary-white-on-dark { transition: .3s all; -webkit-transition: .3s all; } /* Secondary button */ .btn-secondary-green-on-white { background: none; border: 2px solid #4BCD3E; color: #012834; } .btn-secondary-green-on-white:hover { background: #4BCD3E; } .btn-secondary-green-on-white:active { background: #ffffff; outline: none; color: #012834; } .btn-secondary-green-on-white:focus, .btn-secondary-green-on-dark:focus, .btn-secondary-white-on-dark:focus, .btn-primary-green-on-white:focus, .btn-primary-green-on-dark:focus, .btn-primary-white-on-dark:focus { outline: none; } .btn-secondary-green-on-dark { background: none; border: 2px solid #4BCD3E; color: #ffffff; } .btn-secondary-green-on-dark:hover { background: #4BCD3E; border-radius: 67px; color: #012834; } .btn-secondary-green-on-dark:active,.btn-secondary-white-on-dark:active { background: none; outline: none; border: 2px solid #ffffff; color: #ffffff; } .btn-secondary-white-on-dark { background: none; border: 2px solid #ffffff; color: #ffffff; } .btn-secondary-white-on-dark:hover { background: #ffffff; }