How to create custom buttons with arrows for twitter bootstrap?


Tags: css,html5,twitter-bootstrap

Problem :

Semantically, the information I want to display is a series of user selectable stages of a pipeline.

Example:

[Stage1 (4 items) |> Stage2 (10 items) |> Stage3 (4 items)]

I am using bootstrap 3 and jQuery.

Here is the css I attempted to put a triangle on the right of a button.

.btn:not(:last-child)::after {
  z-index:2;
  position: relative;
  left: 19px;
  display: inline-block;
  /* Triange like this > */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid grey;
  content: '';
}

http://codepen.io/smartnut007/pen/LpLVje

The codepen has both a sample of my desired outcome and also my very unsuccessful attempt at it. I sort of figured how to make the arrow display using CSS. But, am stuck with the rest of it.

Couple of nube questions, if you will indulge me :-)

A) The arrow works on a simple button. But, the positioning of the arrow is off once I put richer html in the button. What is a smarter way to position this ?

B) As a next step, I want the active stage to be highlighted (.btn-primary or some such thing to mark it active). How can I make both the arrow and the selected section/button highlight to the same color ?

C) Is a button and button group the right way to go about it ? I am also open to others such as horizontal list group etc if it will be easier.

Whatever technique, I would prefer it to work for at least IE9+ and other major browsers.

Update:

I was able achieve most of what I wanted here http://jsfiddle.net/rqu7vrnh/2/



Solution :

I sort of figured how to make the arrow display using CSS. But, am stuck with the rest of it.

You are on the right track. Just a couple of fixes is what you need.

A) The arrow works on a simple button. But, the positioning of the arrow is off once I put richer html in the button. What is a smarter way to position this?

Your buttons should be positioned relative and the arrows as absolute. This will help you precisely position the arrows where you want.

B) As a next step, I want the active stage to be highlighted (.btn-primary or some such thing to mark it active). How can I make both the arrow and the selected section/button highlight to the same color?

Use the :hover on your buttons to change the border-left color. Also, on the .active of your buttons, because Bootstrap way of highlighting the active button is to add the active class. You could also do that for :active and :focus while you are at it.

Example Fiddle: http://jsfiddle.net/abhitalks/onxrj3wt/1/

Example Snippet:

.btn { position: relative; }
.btn:not(:last-child)::after {
    content: ''; z-index: 100;
    height: 0px; width: 0px;
    position: absolute;
    right: -8px; top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ddd;
}
.btn:hover { background-color: #ccc; }
.btn:active { background-color: #7ac7d2 !important; }
.btn:focus { background-color: #7ac7d2 !important; }
.btn:not(:last-child):hover::after {
    border-left: 6px solid #ccc;
}
.btn:not(:last-child):active::after, 
.btn:not(:last-child):focus::after 
{
    border-left: 6px solid #7ac7d2;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top:20px; margin-left:40px;">
  Attempt 1
  <div class="row">
    <div class="btn-group" role="group">
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">767</h3>
        <p class="text-muted text-center">Stage1</p>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">17</h3>
        <p class="text-muted text-center">Stage2</p>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">7</h3>
        <p class="text-muted text-center">Stage3</p>
      </a>
    </div>
  </div>
  
  
  <div class="row"> &nbsp; <div>
    
   Desired Output
  <div class="row">
    
    <img src="https://s3.amazonaws.com/warning-public-resources/pipeliene-example.png" height="100"></img>
  </div>
</div>

Note: The above example is a quick demo. Specificity of the elements is not considered. In your production code, you should carefully look at the specificity of the rules which override Bootstrap ones, so that !important is avoided.


    CSS Howto..

    How to control CSS cache?

    How to make a round mask over a image

    How can I use min-width 100% and still have expanding by content?

    How can I track down a:hover jquery source?

    How to force Chrome browser to reload .css file while debugging in Visual Studio?

    How to make an iFrame window scrolls with overflow:hidden?

    How can I show hidden element when it has focus?

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    CSS: How to move hint box (a:hover) to the left?

    How do I achieve a fully working image scrolling effect like in this example?

    How can I have a tile-able area to the left and right of a div?

    How to add spacing between two rows of multiple divs each

    How to position a scroll box on top of an image using only inline CSS

    CSS How to display an image in the size of a / text line

    How to select the second th into the thead of a table having a specific ID using CSS?

    How to make a HTML/CSS/JS iOS style slide transition? [closed]

    How to put text on placeholder image

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How to create flexible div items that break after the line?

    Show nav once the nav has been hidden

    How to center a div tag in a html page without being affected by zooming

    How to set border around Twitter Bootstrap Icon?

    How to edit css margin-top for a text in mobile version

    how to make background 100% on a top menu

    How do I solve this IE7 margin issue?

    How to change the Fill color of an SVG path via CSS

    How does ASP.NET generate HTML?

    How to control the layout in JSF?

    How to vertical align element relative other element with pseudo-class? [duplicate]

    Customizing Clockdown.js to Show only Minutes and Seconds