CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Moritz Schöfl
Moritz Schöfl

Reputation: 763

Bootstrap Whole Image as a Button

I am trying to create a sweet looking Button in Bootstrap. I have 4 images which show the discrete states of my button (Normal, Hover, Pressed, Disabled).

But I cant figure out what the best practice for this is. using the src in an input type image doesnt seem to be working that nice, since browsers will create a blue rect when clicking.

(I just need the whole image to be the button, its not a logo or smth that needs to be displayed on a certain position)

EDIT: its for my custom facebook/google/outlook login buttons

Upvotes: 0

Views: 279

Answers (3)

Gerard
Gerard

Reputation: 15786

You need to replace the url's with the images you have.

.fb {
  background: url(http://placehold.it/50x20/00ff00);
}

.fb:hover {
  background: url(http://placehold.it/50x20/0000ff);
}

.outlook:disabled {
  background: url(http://placehold.it/50x20/000000);
  color: white;
}

.fb:active {
  background: url(http://placehold.it/50x20/666666);
}
<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>

Upvotes: 1

Amaan Iqbal
Amaan Iqbal

Reputation: 761

You can use img tag inside anchor tag to do so For toggling between the states you can use jQuery.

Let me know if you require any further help!!

Upvotes: 0

DanielWaw
DanielWaw

Reputation: 699

Best practice will be to use :before elements where You will be displaying image on "button".

Upvotes: 0

Related Questions