CODEWITHSUNDEEP
cssbuttontwitter-bootstrap-3
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Create button with icons bootstrap 3?

I need to create this kind of button in Bootstrap 3:

Button Preview

The problem is that line between text and icon: I have tried a lot but still didn't get the same look :(

Here is what I have for now

CSS

.btn-default, .btn-default:active, .btn-default:focus{
    background-color:#fff;
    background-color: rgba(255,255,255, 1.0);
    -webkit-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    -moz-box-shadow:    0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    box-shadow:         0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    border-top:1px solid rgba(48, 174, 227, 1.0);
    border-left:1px solid rgba(48, 174, 227, 1.0);
    border-right:1px solid rgba(48, 174, 227, 1.0);
}

HTML

<a href="#" class="btn btn-default"><i class="fa fa-lg fa-file-excel-o"></i>Export to excel</a>

Maybe the answer is in btn group, but that icon is clickable also :(

Upvotes: 0

Views: 3411

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://www.bootply.com/vVPtGC3QEs

a.btn{
 padding:4px 15px;
}

.fa-lg{
  border-right: 2px solid rgba(48, 174, 227, 1.0);
  padding-right: 7px;
  margin-right: 8px;
  vertical-align: initial;
  line-height:28px;
}

Upvotes: 3

Related Questions