Bootscrap 箭头按钮

来源：互联网发布：胖熊数据库的微博微博编辑：程序博客网时间：2024/06/06 04:13

<!DOCTYPE html><html><head>  <meta name="description" content="Bootstrap Directional Buttons Demo">  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Bootstrap Directional Buttons</title>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  <link href="bootstrap-directional-buttons.css" rel="stylesheet" type="text/css" />  <style>    body{      padding: 40px;      padding-top: 0px;    }    h4{      margin-top: 35px;    }    h5{      margin-top: 15px;    }    h4, h5{      font-weight: bold;    }  </style></head><body>  <h4>Regular Buttons</h4>  <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>  <button type="button" class="btn btn btn-primary btn-arrow-left">Primary</button>  <button type="button" class="btn btn btn-success btn-arrow-left">Success</button>  <button type="button" class="btn btn btn-link">Link</button>  <button type="button" class="btn btn-info btn-arrow-right">Info</button>  <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>  <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>  <h5>Inside .btn-group</h5>  <div class='btn-group'>    <button type="button" class="btn btn-default btn-arrow-left">Default</button>    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>    <button type="button" class="btn btn-success btn-arrow-left">Success</button>    <button type="button" class="btn btn-link">Link</button>    <button type="button" class="btn btn-info btn-arrow-right">Info</button>    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>  </div>   <h4>Large Buttons</h4>  <button type="button" class="btn btn-lg btn btn-default btn-arrow-left">Default</button>  <button type="button" class="btn btn-lg btn-primary btn-arrow-left">Primary</button>  <button type="button" class="btn btn-lg btn-success btn-arrow-left">Success</button>  <button type="button" class="btn btn-lg btn-link">Link</button>  <button type="button" class="btn btn-lg btn-info btn-arrow-right">Info</button>  <button type="button" class="btn btn-lg btn-warning btn-arrow-right">Warning</button>  <button type="button" class="btn btn-lg btn-danger btn-arrow-right">Danger</button>  <h5>Inside .btn-group</h5>  <div class='btn-group btn-group-lg'>    <button type="button" class="btn btn-default btn-arrow-left">Default</button>    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>    <button type="button" class="btn btn-success btn-arrow-left">Success</button>    <button type="button" class="btn btn-link">Link</button>    <button type="button" class="btn btn-info btn-arrow-right">Info</button>    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>  </div>  <h4>Small Buttons</h4>  <button type="button" class="btn btn-sm btn btn-default btn-arrow-left">Default</button>  <button type="button" class="btn btn-sm btn-primary btn-arrow-left">Primary</button>  <button type="button" class="btn btn-sm btn-success btn-arrow-left">Success</button>  <button type="button" class="btn btn-sm btn-link">Link</button>  <button type="button" class="btn btn-sm btn-info btn-arrow-right">Info</button>  <button type="button" class="btn btn-sm btn-warning btn-arrow-right">Warning</button>  <button type="button" class="btn btn-sm btn-danger btn-arrow-right">Danger</button>  <h5>Inside .btn-group</h5>  <div class='btn-group btn-group-sm'>    <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>    <button type="button" class="btn btn-success btn-arrow-left">Success</button>    <button type="button" class="btn btn-link">Link</button>    <button type="button" class="btn btn-info btn-arrow-right">Info</button>    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>  </div>  <h4>Extra Small Buttons</h4>  <button type="button" class="btn btn-xs btn btn-default btn-arrow-left">Default</button>  <button type="button" class="btn btn-xs btn-primary btn-arrow-left">Primary</button>  <button type="button" class="btn btn-xs btn-success btn-arrow-left">Success</button>  <button type="button" class="btn btn-xs btn-link">Link</button>  <button type="button" class="btn btn-xs btn-info btn-arrow-right">Info</button>  <button type="button" class="btn btn-xs btn-warning btn-arrow-right">Warning</button>  <button type="button" class="btn btn-xs btn-danger btn-arrow-right">Danger</button>  <h5>Inside .btn-group</h5>  <div class='btn-group btn-group-xs'>    <button type="button" class="btn btn-default btn-arrow-left">Default</button>    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>    <button type="button" class="btn btn-success btn-arrow-left">Success</button>    <button type="button" class="btn btn-link">Link</button>    <button type="button" class="btn btn-info btn-arrow-right">Info</button>    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>  </div></body></html>

bootstrap-directional-buttons.css

.btn-arrow-right,.btn-arrow-left {  position: relative;  padding-left: 18px;  padding-right: 18px;  border-radius: 0 !important;  margin-right: 1px; }  .btn-arrow-right[disabled],  .btn-arrow-left[disabled] {    opacity: 1.00; }  .btn-arrow-right:before, .btn-arrow-right:after,  .btn-arrow-left:before,  .btn-arrow-left:after {    content: "";    position: absolute;    top: 4px;    /* move it down because of rounded corners */    height: 24px;    /* button_inner_height / sqrt(2) */    width: 24px;    /* same as height */    background: inherit;    /* use parent background */    border: inherit;    /* use parent border */    border-left-color: transparent;    /* hide left border */    border-bottom-color: transparent;    /* hide bottom border */    border-radius: 0 !important; }  .btn-arrow-right:before,  .btn-arrow-left:before {    left: -13px; }  .btn-arrow-right:after,  .btn-arrow-left:after {    right: -13px; }  .btn-arrow-right.btn-arrow-left,  .btn-arrow-left.btn-arrow-left {    padding-right: 36px; }    .btn-arrow-right.btn-arrow-left:before, .btn-arrow-right.btn-arrow-left:after,    .btn-arrow-left.btn-arrow-left:before,    .btn-arrow-left.btn-arrow-left:after {      -webkit-transform: rotate(225deg);      -ms-transform: rotate(225deg);      transform: rotate(225deg);      /* rotate right arrow squares 45 deg to point right */ }  .btn-arrow-right.btn-arrow-right,  .btn-arrow-left.btn-arrow-right {    padding-left: 36px; }    .btn-arrow-right.btn-arrow-right:before, .btn-arrow-right.btn-arrow-right:after,    .btn-arrow-left.btn-arrow-right:before,    .btn-arrow-left.btn-arrow-right:after {      -webkit-transform: rotate(45deg);      -ms-transform: rotate(45deg);      transform: rotate(45deg);      /* rotate right arrow squares 45 deg to point right */ }.btn-arrow-right:after,.btn-arrow-left:before {  /* bring arrow pointers to front */  z-index: 3; }.btn-arrow-right:before,.btn-arrow-left:after {  /* hide arrow tails background */  background-color: white; }/* Large */.btn-lg.btn-arrow-right,.btn-lg.btn-arrow-left,.btn-group-lg > .btn-arrow-left,.btn-group-lg > .btn-arrow-right {  padding-left: 22px;  padding-right: 22px;  margin-right: 0px; }  .btn-lg.btn-arrow-right:before, .btn-lg.btn-arrow-right:after,  .btn-lg.btn-arrow-left:before,  .btn-lg.btn-arrow-left:after,  .btn-group-lg > .btn-arrow-left:before,  .btn-group-lg > .btn-arrow-left:after,  .btn-group-lg > .btn-arrow-right:before,  .btn-group-lg > .btn-arrow-right:after {    top: 6px;    /* move it down because of rounded corners */    height: 32px;    /* button_inner_height / sqrt(2) */    width: 32px;    /* same as height */ }  .btn-lg.btn-arrow-right:before,  .btn-lg.btn-arrow-left:before,  .btn-group-lg > .btn-arrow-left:before,  .btn-group-lg > .btn-arrow-right:before {    left: -16px; }  .btn-lg.btn-arrow-right:after,  .btn-lg.btn-arrow-left:after,  .btn-group-lg > .btn-arrow-left:after,  .btn-group-lg > .btn-arrow-right:after {    right: -16px; }  .btn-lg.btn-arrow-right.btn-arrow-left,  .btn-lg.btn-arrow-left.btn-arrow-left,  .btn-group-lg > .btn-arrow-left.btn-arrow-left,  .btn-group-lg > .btn-arrow-right.btn-arrow-left {    padding-right: 44px; }  .btn-lg.btn-arrow-right.btn-arrow-right,  .btn-lg.btn-arrow-left.btn-arrow-right,  .btn-group-lg > .btn-arrow-left.btn-arrow-right,  .btn-group-lg > .btn-arrow-right.btn-arrow-right {    padding-left: 44px; }/* Small */.btn-sm.btn-arrow-right,.btn-sm.btn-arrow-left,.btn-group-sm > .btn-arrow-left,.btn-group-sm > .btn-arrow-right {  padding-left: 14px;  padding-right: 14px;  margin-right: -1px; }  .btn-sm.btn-arrow-right:before, .btn-sm.btn-arrow-right:after,  .btn-sm.btn-arrow-left:before,  .btn-sm.btn-arrow-left:after,  .btn-group-sm > .btn-arrow-left:before,  .btn-group-sm > .btn-arrow-left:after,  .btn-group-sm > .btn-arrow-right:before,  .btn-group-sm > .btn-arrow-right:after {    top: 4px;    /* move it down because of rounded corners */    height: 20px;    /* button_inner_height / sqrt(2) */    width: 20px;    /* same as height */ }  .btn-sm.btn-arrow-right:before,  .btn-sm.btn-arrow-left:before,  .btn-group-sm > .btn-arrow-left:before,  .btn-group-sm > .btn-arrow-right:before {    left: -10px; }  .btn-sm.btn-arrow-right:after,  .btn-sm.btn-arrow-left:after,  .btn-group-sm > .btn-arrow-left:after,  .btn-group-sm > .btn-arrow-right:after {    right: -10px; }  .btn-sm.btn-arrow-right.btn-arrow-left,  .btn-sm.btn-arrow-left.btn-arrow-left,  .btn-group-sm > .btn-arrow-left.btn-arrow-left,  .btn-group-sm > .btn-arrow-right.btn-arrow-left {    padding-right: 28px; }  .btn-sm.btn-arrow-right.btn-arrow-right,  .btn-sm.btn-arrow-left.btn-arrow-right,  .btn-group-sm > .btn-arrow-left.btn-arrow-right,  .btn-group-sm > .btn-arrow-right.btn-arrow-right {    padding-left: 28px; }/* Extra Small */.btn-xs.btn-arrow-right,.btn-xs.btn-arrow-left,.btn-group-xs > .btn-arrow-left,.btn-group-xs > .btn-arrow-right {  padding-left: 10px;  padding-right: 10px;  margin-right: -1px; }  .btn-xs.btn-arrow-right:before, .btn-xs.btn-arrow-right:after,  .btn-xs.btn-arrow-left:before,  .btn-xs.btn-arrow-left:after,  .btn-group-xs > .btn-arrow-left:before,  .btn-group-xs > .btn-arrow-left:after,  .btn-group-xs > .btn-arrow-right:before,  .btn-group-xs > .btn-arrow-right:after {    top: 3px;    /* move it down because of rounded corners */    height: 14px;    /* button_inner_height / sqrt(2) */    width: 14px;    /* same as height */ }  .btn-xs.btn-arrow-right:before,  .btn-xs.btn-arrow-left:before,  .btn-group-xs > .btn-arrow-left:before,  .btn-group-xs > .btn-arrow-right:before {    left: -7px; }  .btn-xs.btn-arrow-right:after,  .btn-xs.btn-arrow-left:after,  .btn-group-xs > .btn-arrow-left:after,  .btn-group-xs > .btn-arrow-right:after {    right: -7px; }  .btn-xs.btn-arrow-right.btn-arrow-left,  .btn-xs.btn-arrow-left.btn-arrow-left,  .btn-group-xs > .btn-arrow-left.btn-arrow-left,  .btn-group-xs > .btn-arrow-right.btn-arrow-left {    padding-right: 20px; }  .btn-xs.btn-arrow-right.btn-arrow-right,  .btn-xs.btn-arrow-left.btn-arrow-right,  .btn-group-xs > .btn-arrow-left.btn-arrow-right,  .btn-group-xs > .btn-arrow-right.btn-arrow-right {    padding-left: 20px; }/* Button Groups */.btn-group > .btn-arrow-left:hover, .btn-group > .btn-arrow-left:focus,.btn-group > .btn-arrow-right:hover,.btn-group > .btn-arrow-right:focus {  z-index: initial; }.btn-group > .btn-arrow-right + .btn-arrow-right,.btn-group > .btn-arrow-left + .btn-arrow-left {  margin-left: 0px; }.btn-group > .btn:not(.btn-arrow-right):not(.btn-arrow-left) {  z-index: 1; }

阅读全文

0 0