css - How to fix the arrow button -
how fix arrow button
attached i'm using http://jsfiddle.net/shpoont/3ca4x/
codes. cannot change html codes, generate program. can override css codes. help. short list of button code given below:
<button id="flowselectusersbtn" class="btn btn-progress progress-active" href="#"> <span class="hidden-xs ng-binding">select users</span> </button> [![arrow button][1]][1]
here css codes:
.progress-active { position: relative; padding-left: 18px; padding-right: 18px; } .progress-active { padding-left: 36px; } .progress-active:before, .progress-active:after { content:""; position: absolute; top: 5px; width: 22px; height: 22px; background: inherit; border: inherit; border-left-color: transparent; border-bottom-color: transparent; border-radius: 0px 4px 0px 0px; -webkit-border-radius: 0px 4px 0px 0px; -moz-border-radius: 0px 4px 0px 0px; } .progress-active:before, .progress-active:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .progress-active:before{ left: -11px; } .progress-active:after { right: -11px; } .progress-active:after { z-index: 1; } .progress-active:before { background-color: white; }
.progress-active { position: relative; padding-left: 18px; padding-right: 18px; border: none; } .progress-active { padding-left: 36px; } .progress-active:before, .progress-active:after { content:""; position: absolute; top: 2px; width: 13px; height: 13px; background: inherit; } .progress-active:before, .progress-active:after { transform: rotate(90deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .progress-active:before{ left: -5px; } .progress-active:after { right: -5px; } .progress-active:after { z-index: 1; } .progress-active:before { background-color: white; }
<button id="flowselectusersbtn" class="btn btn-progress progress-active" href="#"> <span class="hidden-xs ng-binding">select users</span> </button> <button id="flowselectusersbtn" class="btn btn-progress progress-active" href="#"> <span class="hidden-xs ng-binding">select users</span> </button> <button id="flowselectusersbtn" class="btn btn-progress progress-active" href="#"> <span class="hidden-xs ng-binding">select users</span> </button>
Comments
Post a Comment