css 主导航菜单项为CTA

Posted 2021-05-13

/*** menu button ***/
.main-nav-btn a {
    color: #fff !important;
	  background-color: rgb(176, 159, 86);
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: Capitalize;
    font-size: 16px !important;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid rgb(176, 159, 86);
}
 
.main-nav-btn a:hover {
    opacity: 1 !important;
    background-color: #d4bf66;
	  border-color: #d4bf66;
}
 
.et-fixed-header #top-menu .main-nav-btn a:hover {
	  color: #fff;
    background-color: #d4bf66;
    border: 2px solid #d4bf66;
}
 
.et-fixed-header #top-menu .main-nav-btn a {
    color: #fff !important;
    background-color: rgb(176, 159, 86);
}
.et-fixed-header.et_highlight_nav #top-menu .main-nav-btn a {
    background-color: #8ec63f;
    border: 2px solid #8ec63f;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}
 
#main-header.et-fixed-header.et_highlight_nav #top-menu .main-nav-btn a:hover {
    background-color: #d4bf66;
    border: 2px solid #d4bf66;
}

.et-fixed-header #top-menu li.current-menu-item.main-nav-btn>a {
  color: #fff!important;
}
 
@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}