How to create custom buttons with arrows for twitter bootstrap? - css

Question

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/

Answer 1

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"> <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.

Answer 2

Change your CSS to below snipet. Using btn-primary class will activate the button.
.btn {
height: 90px;
width: 100px;
}
.btn:not(:last-child)::after {
position: absolute;
right: -6px;
z-index: 1;
top: 50%;
margin-top: -6px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid grey;
content: '';
}
.btn.btn-primary::after {
border-left: 6px solid #337ab7;
}
.btn.btn-primary::before {
position: absolute;
left: -1px;
z-index: 1;
top: 50%;
margin-top: -6px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #fff;
content: '';
}
.btn-primary p {
color: #fff;
}

Answer 3

This may help or give you some ideas.
body,
html {
margin-top: 20px;
margin-left: 40px;
}
button.btn.btn-cycle {
height: 150px;
width: 150px;
border-radius: 0;
border: none;
background: white;
border-top: 6px solid #f5f5f5;
border-left: 6px solid #f5f5f5;
border-bottom: 6px solid #f5f5f5;
font-size: 20px;
}
button.btn.btn-cycle:last-child {
border-right: 6px solid #f5f5f5;
}
button.btn.btn-cycle:last-child:before {
content: "";
position: absolute;
top: 33.33%;
left: 100%;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:not(:first-child):after {
content: "";
position: absolute;
top: 33.33%;
left: 0;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:first-child {
border-left: 6px solid #f5f5f5;
}
button.btn .btn-span {
font-weight: 800;
font-size: 10px;
display: block;
}
button.btn.btn-cycle:hover {
background: teal;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-cycle">187 <span class="btn-span">ACTIVE</span>
</button>
<button type="button" class="btn btn-cycle">112 <span class="btn-span">UNACKNOWLEDGED</span>
</button>
<button type="button" class="btn btn-cycle">11 <span class="btn-span">ACKNOWLEDGED</span>
</button>
</div>
</div>

Answer 4

You need to understand the structure first. As per image in codepen, it shows that you want dives in row having borders with different gauge. You need to understand the placing of border as per image.
Anyways I tried answering your question But checkout Abhitalks answer and understand the things.
CodePen: http://codepen.io/anon/pen/LpLpxM
Try out below,
.wrapper {
margin-top:20px;
border-top: 9px solid #F0F0F2;
border-bottom: 9px solid #F0F0F2;
height:108px;
width:334px;
}
.box{
background-color: #fff;
float: left;
height: 90px;
padding-top: 22px;
width: 100px;
text-align:center;
border-right: 2px solid #F0F0F2;
font-size:20px;
}
.box.first {
border-left: 9px solid #F0F0F2;
width:110px;
}
.box.active {
background-color: #82C8D2;
}
.box::after {
z-index: 2;
position: relative;
left: 53px;
bottom:34px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #F0F0F2;
content: '';
}
.box.active::after {
border-left: 6px solid #82C8D2;
left: 52px;
}
.text-small {
display: block;
font-size: 8px;
font-weight: bold;
text-transform: uppercase;
}
<div class="wrapper">
<div id="div1" class="box first grid-box1">187
<span class="text-small">Active</span>
</div>
<div id="div2" class="box grid-box2">112
<span class="text-small">Unacknowledge</span>
</div>
<div id="div3" class="box grid-box3 active">11
<span class="text-small">Acknowledge</span>
</div>
</div>