Buttons and Links

Blue Button

Save

Disabled


Save
.blueButton {
   background: #2980bf;
   height: 28px;
   border-radius: 0;
   font-size: 13px;
   font-family: "tableau_medium";
   padding: 0 13px;
   line-height:  28px;
   min-width:  80px;
   width:  fit-content;
   text-align: center;
   color: #fff;
   box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}
.blueButton a:hover {
   background: #4C638C;
   box-shadow: none;
}
.blueButton_disabled{
   background: #b5c6d6;
   cursor: default;   
}

Blue Button with dropdown

Add Application

Opened


Add Application

Disabled


Add Application 
.blueButton-dropdown {
   background: #fff;
   font-size: 13px;
   padding: 0 23px 0 10px;
   line-height: 28px;
   width: 160px;
   color: #000;
   box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}
.blueButton-dropdown li:hover {
   background: #e1e8ef;
   line-height: 28px;
}

Outline White Button

Cancel

Disabled


Cancel
.whiteButton {
   background: #fff;
   height: 26px;
   min-width:  80px;
   width:  fit-content;
   font-size: 13px;
   font-family: "tableau_medium";
   padding: 0 13px;
   line-height:  26px;
   text-align: center;
   color: #2980bf;
   border: 1px solid #2980bf; 
   box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}
.whiteButton a:hover {
   background: #f7f9fa;
   box-shadow: none;
   border: 1px solid #4C638C;
   color: #4C638C;
}
.whiteButton_disabled{
   background: #f7f9fa;
   cursor: default;  
   color: #b5c6d6;
   border: 1px solid #b5c6d6;
}

Outline White Button with dropdown

Actions

Opened


Actions

Disabled


Actions 
.blueButton-dropdown {
   background: #fff;
   font-size: 13px;
   padding: 0 23px 0 10px;
   line-height: 28px;
   width: 160px;
   color: #000;
   box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}
.blueButton-dropdown li:hover {
   background: #e1e8ef;
   line-height: 28px;
}

Outline White Button with left icon

Refresh

.whiteButton {
   background: #fff;
   height: 26px;
   min-width:  80px;
   width:  fit-content;
   font-size: 13px;
   font-family: "tableau_medium";
   padding: 0 13px;
   line-height:  26px;
   text-align: center;
   color: #2980bf;
   border: 1px solid #2980bf; 
   box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
}
.whiteButton a:hover {
   background: #f7f9fa;
   box-shadow: none;
   border: 1px solid #4C638C;
   color: #4C638C;
}
.whiteButton_disabled{
   background: #f7f9fa;
   cursor: default;  
   color: #b5c6d6;
   border: 1px solid #b5c6d6;
}
img{
   fill: #666;
   height: 14px;  
   width: 14px;
   padding-right: 5px;
}

Links

Link Sample

Disabled


Link Sample
a{
   color: #2980bf;
   text-decoration: none;  
}
a:hover{
   color: #3498DB;
   text-decoration: none; 
}
a:disabled{
   color: #b5c6d6;
   cursor: default;
}