CSS Web Buttons Basic Dropdown Properties

Netbax Online Editor Try it Yourself

<button class="button green" type="button" data-toggle="dropdown" >Green ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button orange" type="button" data-toggle="dropdown" >Orange ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 10rem;  padding: 0.5rem 0;  margin: 0.125rem 0 0;  font-size: 1rem;  color: #ffffff;  text-align: left;  list-style: none;  background-color: #18191b;  background-clip: padding-box;  border: 1px solid #2c2e33;  border-radius: 0.25rem; align-items: center !important;}

.dropdown-item {  display: block;  width: 60%;  padding: 0.25rem 1.5rem;  clear: both;  font-weight: 400;  color: #ffffff;  text-align: inherit;  white-space: nowrap;  background-color: transparent;  border: 1px solid #252321; }
.dropdown-item:hover, .dropdown-item:focus {color: #ccc;    text-decoration: none;    background-color: #252321; }  
.dropdown-menu.show {  display: block; }

.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); }

.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

</style>