Skip to content

Instantly share code, notes, and snippets.

@leetschau

leetschau/progress-button.html

Created May 20, 2016 05:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leetschau/dae419bd1280ecf351a49573fff2135f to your computer and use it in GitHub Desktop.
Save leetschau/dae419bd1280ecf351a49573fff2135f to your computer and use it in GitHub Desktop.
Download ZIP
Progress Button Group
Raw
progress-button.html
<html><br><head><br><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><br><br><style><br> .progress-group {<br> margin: 50px;<br> width: 50%;<br> }<br> .progress-button {<br> position: relative;<br> }<br> .progress-button::before {<br> position: absolute;<br> border-width: 17px;<br> border-style: solid;<br> content: "";<br> right: -34px; <br> top: -1px;<br> border-color: transparent transparent transparent #ccc;<br> z-index: 50;<br> }<br> .progress-button::after {<br> position: absolute;<br> border-width: 16px;<br> border-style: solid;<br> content: "";<br> right: -32px; <br> top: 0;<br> border-color: transparent transparent transparent white;<br> z-index: 50;<br> }<br> .progress-button.btn-lg::before {<br> border-width: 23px;<br> right: -46px; <br> }<br> .progress-button.btn-lg::after {<br> border-width: 22px;<br> right: -44px; <br> }<br> .progress-button:hover::before {<br> border-left-color: #adadad;<br> }<br> .progress-button:hover::after {<br> border-left-color: #e6e6e6;<br> }<br> .progress-button.btn-primary::before {<br> border-left-color: #2e6da4;<br> }<br> .progress-button.btn-primary::after {<br> border-left-color: #337ab7;<br> }<br> .progress-button.btn-primary:hover::before {<br> border-left-color: #204d74;<br> }<br> .progress-button.btn-primary:hover::after {<br> border-left-color: #286090;<br> }<br> .progress-button:last-child::before,<br> .progress-button:last-child::after {<br> display: none;<br> }<br></style><br></head><br><body><br><br><div class="btn-group progress-group" role="group" aria-label="…"><br> <button type="button" class="btn btn-lg btn-default btn-primary col-sm-3 progress-button">Left</button><br> <button type="button" class="btn btn-lg btn-default col-sm-3 progress-button">Middle</button><br> <button type="button" class="btn btn-lg btn-default col-sm-3 progress-button">Right</button><br></div><br><br></body><br></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment