Step 1 :
Create a normal Button
1--Active_Information
2--Active_SR
3--Employee_LIsT
4--Change_Info
Step 2 :
Inline CSS
#SR {
display: none;
}
.submanu .t-Cards--featured .t-Card-desc {
font-size: 14px;
line-height: 0px;
display: none;
}
.submanu .t-Card {
transition: all .1s ease-out;
border-radius: 3px;
box-shadow: 0 2px 4px -2px rgb(0 0 0 / 8%);
margin: 8px;
}
#ACTIVE, #ACTIVESR, #EMPLIST, #CNGINFO {
cursor: pointer;
background: #9ee7b1;
height: 80px;
width: 100%;
box-shadow: 10px 10px 20px #d4d4d429;
border-radius: 10px 37px 37px 10px;
border-left: 10px solid #01649A;
border-right: 0px solid #01649A;
border-top: 0px solid #01649A;
border-bottom: 0px solid #01649A;
padding: 5px 10px;
font-size: 19px;
font-weight: normal;
color: #000000;
}
#ACTIVESR {background: #9eaae7;}
#EMPLIST {background: #71c0ff;}
#CNGINFO {background: #e79e9e;}
.a-Menu-content.t-Card {
padding: 4px 8px;
margin: 0;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.a-Menu-content.t-Card .t-Card-icon {
display: flex;
flex: none;
margin: 8px;
width: 64px;
height: 64px;
}
.a-Menu-content.t-Card .menu-items {
display: flex;
flex-direction: column;
height: auto;
flex-grow: 1;
}
.a-Menu-content.t-Card .menu-items .a-Menu-item {
display: inline-block;
line-height: 20px;
margin: 4px;
}
.a-Menu-content.t-Card .menu-items .a-Menu-item > span {
display: inline-block;
width: 100%;
}
.a-Menu-content.t-Card .a-Menu-item.is-focused,
.a-Menu-content.t-Card .a-Menu-item:hover {
outline: 3px solid #7ac1fc;
}
.a-Menu-content.t-Card .a-Menu-label,
.a-Menu-content.t-Card .a-Menu-label.is-focused,
.a-Menu-content.t-Card .a-Menu-label:hover {
padding: 4px 8px;
}
.a-Menu-content.t-Card .menu-items .a-Menu-label > span {
margin-right: 8px;
vertical-align: baseline;
}
.t-Cards--basic .t-Card-body {
padding: 16px;
display: none;
}
Step 3:
Button Static ID
ACTIVE
ACTIVESR
EMPLIST
CNGINFO