Bootstrap btn-group Modifying “base” button

Question

Good Morning,

I'm trying to use the Bootstrap Button Group to group a family of related elements together. These elements are only "effective" for a given calendar year so I'm trying to group the "past elements" together in an easy to display fashion. So far I really like using the bootstrap button group to do this as outlined here.

However, I am displaying multiple of these on a "list-like" view and all of these buttons really aren't easy on the eyes. What I'd like to do is instead of a button for the very first element, make it a link and just have the small caret button to the right side of that link if my uses wish to look at the past elements.

Does anyone know of an easy way to style this? To reword - I want the very top element to only be an (or something similar) and only have a button containing the caret symbol off to the side of it.

Thanks in advance!

Answer 1

If you look at bootstrap 2.1, which is a work in progress at this time, they introduce a new button stlye class .btn-link that would probably work for this

.btn-link {
  color: #08C;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
  border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  box-shadow: none;
}
.btn-link:hover {
  color: #005580;
  text-decoration: underline;
  background-color: transparent;
}

They don't seem to have included it in the button group documentation, so it may look a little funny.

http://jsfiddle.net/qtK95/4/