ripro v2主题顶部菜单添加渐变按钮的教程

今天给大家分享下ripro V2主题菜单添加渐变按钮的教程。（此教程ripro V2主题已测试没问题，原则上也可以用于其他主题，大家自行测试）

首先，进入到网站后台，将下面的代码添加到“外观-自定义-额外CSS里面”

[rihide]

/*菜单背景尺寸*/
.navbar .nav-list>.menu-item>a {
    font-size: .875rem;
    line-height: 30px;
    margin: 0 10px;
    -webkit-transition: color 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
/*添加菜单按钮*/
.my-custom-menu-button {
border-image: linear-gradient(rgb(0 6 143), rgb(242 66 250)) 1;
background-image: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
	border-radius: 5px;
}

.my-custom-menu-button a, .my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #ffffff !important;
}

.my-custom-menu-button:hover {
	background-color: #FF4D4D;
}
/*将移动端按钮背景颜色调整为白色*/
.slicknav_menu .menu-item>a {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
line-height: 1;
outline: none;
padding: 12px 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 2px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
background: #f7f7f700;
}

 然后返回到“外观-菜单”，添加一个菜单，在CSS类里面填入：my-custom-menu-button 

 如下图 

[/rihide]设置完后，保存菜单。

返回到网站首页，最终的效果如下：