Nicolas Papaconstantinou Nicolas Papaconstantinou - 3 months ago 31
CSS Question

How to make a responsive text inside a bootstrap button

I am adding the following link button using w3.css and bootstrap libraries. If you resize the screen you notice that the text inside the button is not responsive. How to make the text fit in the button according to the screen resolution?





<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary w3-animate-right w3-hover-shadow w3-teal
w3-hover-indigo btn-block w3-text-white" style="font-weight: bold;width:40%;"
href="#">Proceed to checkout page</a>





Answer

I suppose you have an e-commerce website right? I suggest you to use an image instead, it has better design and it looks more professional. You can choose an image of your choice, but make sure it is not too large

<form action="https://www.google.com">
  <input type="image"  src="http://i.imgur.com/TT3aQk9.png" 
style="width:30%;height:30%;" alt="Submit" >
</form>