按钮设计

最新推荐文章于 2024-12-31 11:39:30 发布

原创最新推荐文章于 2024-12-31 11:39:30 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#按钮设计

前端HTML+CSS 专栏收录该内容

13 篇文章

订阅专栏

实例图（一）：

HTML代码：

<div class="income_box_top_doublebutton">
                       <div class="doublebutton_border doublebutton_left">
                           <button class="button_style doublebutton_1">
                               应收分析
                           </button>
                       </div>
                       <div class="doublebutton_border doublebutton_right">
                           <button class="button_style doublebutton_2">
                               实收分析
                           </button>
                       </div>
</div>

CSS代码：

.income_box_top_doublebutton {
   float: left;
   width: 164px;
   height: 50px;
   padding-top: 12px;
}

.button_style {
   background-color: white;
   outline: none;
   border: 0;
   font-size: 16px;
   color: gray;
}

JS代码：

$(function() {
   $(".doublebutton_1").click(function() {
       $(".doublebutton_1").css("color", "#F58E2C");
       $(".doublebutton_2").css("color", "gray");
       $(".doublebutton_left").css("border-top-color", "#F58E2C");
       $(".doublebutton_left").css("border-left-color", "#F58E2C");
       $(".doublebutton_left").css("border-bottom-color", "#F58E2C");
       $(".doublebutton_right").css("border-left-color", "#F58E2C");
       $(".doublebutton_right").css("border-top-color", "gray");
       $(".doublebutton_right").css("border-right-color", "gray");
       $(".doublebutton_right").css("border-bottom-color", "gray");
   });
   $(".doublebutton_2").click(function() {
       $(".doublebutton_2").css("color", "#F58E2C");
       $(".doublebutton_1").css("color", "gray");
       $(".doublebutton_right").css("border-color", "#F58E2C");
       $(".doublebutton_left").css("border-top-color", "gray");
       $(".doublebutton_left").css("border-left-color", "gray");
       $(".doublebutton_left").css("border-bottom-color", "gray");
   });

});

最后可根据实际情况，在JS的代码找那个添加诸如：

$(".income_box_receivable").css("display", "block");
$(".income_box_officialreceipts").css("display", "none");

的代码实现界面的跳转

实例图（二）：

HTML代码：

<div class="income_check_div">
                       <button class="income_check_button">
                           <span>查 看 详 情 ></span>
                       </button>

</div>

CSS代码：

.income_check_div {
   float: right;
   width: 150px height:55px;
   padding-top: 15px;
}

.income_check_button {
   background-color: white;
   outline: none;
   border: 0;
   font-size: 16px;
   color: #F58E2C;
}

JS部分代码：

$(function() {
//   项目中的跳转代码,引用的时候根据实际情况进行替换
   $(".income_check_button").click(function() {
       $(".income_homepage_backgroundcolor").css("display", "block");
       $(".homepag_backgroundcolor").css("display", "none");
   });

}）；