CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3361043
user3361043

Reputation: 371

Styling links to look the same as buttons I created in Bootstrap 3

I created a nice navigation pane for my website in Bootstrap 3 using buttons (btn-group) because I liked the way they looked. Problem is that I found out that you can't wrap links around buttons, as it's not valid HTML5. I want to change my buttons to plain links but can't get it to look the same. Can someone help please?

Incorrect HTML but right styling:

  <div class="btn-group">
    <a href="index.html"><button type="button" class="btn btn-default active">Home</button></a>
    <a href="services.html"><button type="button" class="btn btn-default">Services</button></a>
  </div>

CSS:

.btn-group .btn {
 border-color: #42C0FB;
 border-width: 2px;
 background-color: #42C0FB;
 }
.btn-group .btn:hover, .btn-default.active {
 background-color: white;
 color: #42C0FB; 
 }
.btn-default.active {
-webkit-box-shadow: inset 0 5px 7px rgba(0, 0, 0, .400);
 box-shadow: inset 0 5px 7px rgba(0, 0, 0, .400);
 }

Upvotes: 0

Views: 91

Answers (1)

atc
atc

Reputation: 605

you should apply the button's css to the link itself and remove the buttons. It should look something like this:

 <div class="btn-group">
    <a href="index.html" class="btn btn-default active">Home</a>
    <a href="services.html" class="btn btn-default">Services</a>
  </div>

More info at http://getbootstrap.com/css/#buttons

Edit:

Here is a fiddle: http://www.bootply.com/GKCf6Vqzki

Upvotes: 3

Related Questions