<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 ----------> <div class="container"> <div class="row"> <button class="btn-change1">Button1</button> <button class="btn-change2">Button2</button> <button class="btn-change3">Button3</button> <button class="btn-change4">Button4</button> </div> <div class="splitbutton"> <input type="button" value="Split Button" onclick="alert('Primary Action');" /> <select onchange="alert(this.value); this.value='primary1';"> <option value="primary" hidden>Primary</option> <option value="secondary">Secondary</option> <option value="alternative">Alternative</option> </select> </div> </div>

.btn-change1{ background-color: #0174C3; margin: 20px; -webkit-transition: all 0.4s ease-in-out; border: 1px #016198 solid; color: #fff; border-radius: 4px; outline-offset: 4px; padding: 8px; } .btn-change1:hover{ -webkit-transform: scale(1); -webkit-transition: all 0.4s ease-in-out; background-color: #016198; border: 1px #004D78 solid; border-radius: 4px; padding: 8px; } .btn-change1:focus { -webkit-transform: scale(1); -webkit-transition: all 0.10s ease-in-out; background-color: #004C77; border-radius: 4px; padding: 8px; box-shadow: 0 0 0 2px #77AACF; border: 2px #003756 solid; } .btn-change2{ background-color: #D9482F; margin: 20px; -webkit-transition: all 0.4s ease-in-out; border: 1px #A43017 solid; color: #fff; border-radius: 4px; outline-offset: 4px; padding: 8px; } .btn-change2:hover{ -webkit-transform: scale(1); -webkit-transition: all 0.4s ease-in-out; background-color: #A43017; border: 1px #711B08 solid; border-radius: 4px; padding: 8px; } .btn-change2:focus { -webkit-transform: scale(1); -webkit-transition: all 0.10s ease-in-out; background-color: #8C220A; border-radius: 4px; padding: 8px; box-shadow: 0 0 0 2px #D99A8D; border: 2px #5B1304 solid; } .btn-change3{ background-color: #FFFFFF; margin: 20px; -webkit-transition: all 0.4s ease-in-out; border: 1px #0173C1 solid; color: #353535; border-radius: 4px; outline-offset: 4px; padding: 8px; } .btn-change3:hover{ -webkit-transform: scale(1); -webkit-transition: all 0.4s ease-in-out; background-color: #ECF7FF; color: #353535; border: 1px #016198 solid; border-radius: 4px; padding: 8px; } .btn-change3:focus { -webkit-transform: scale(1); -webkit-transition: all 0.10s ease-in-out; background-color: #D8E9F5; color: #353535; border-radius: 4px; padding: 8px; box-shadow: 0 0 0 1px #5F93C4; border: 2px solid #004770; } .btn-change4{ margin: 20px; -webkit-transition: all 0.4s ease-in-out; background-color: #F5F5F5; border: 1px #D2D2D2 solid; color: #CCCCCC; border-radius: 4px; outline-offset: 4px; padding: 8px; } .btn-change4:hover{ -webkit-transform: scale(1); -webkit-transition: all 0.4s ease-in-out; background-color: #F5F5F5; border: 1px #D2D2D2 solid; color: #CCCCCC; border-radius: 4px; padding: 8px; } .btn-change4:focus { -webkit-transform: scale(1); -webkit-transition: all 0.10s ease-in-out; background-color: #F5F5F5; border-radius: 4px; padding: 8px; box-shadow: 0 0 0 2px #F5F5F5; border: 2px #F5F5F5 solid; } .splitbutton { position: relative; display: inline-block; } .splitbutton::before, .splitbutton::after { content: ""; position: absolute; right: 0.8rem; top: 1.1rem; width: 0; height: 0; border-top: 0.35rem solid white; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; pointer-events: none; } .splitbutton::before { border-top-color: hsl(220, 75%, 40%); top: calc(1.1rem + 1px); } .splitbutton input, .splitbutton select { background: #0174C3; color: white; border: 0; height: 2.5rem; line-height: 2.5rem; border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .splitbutton input { width: calc(100% - 2rem); position: absolute; border-right: 1px solid #9fb5df; } .splitbutton input:hover, .splitbutton select:hover { background: hsl(220, 75%, 15%); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #016198; border: 1px #004D78 solid; border-radius: 4px; } .splitbutton input:focus, .splitbutton select:focus { background: hsl(220, 75%, 15%); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #004C77; border-radius: 4px; box-shadow: 0 0 0 2px #77AACF; border: 2px #003756 solid; } .splitbutton select { padding-right: 3rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }