CODEWITHSUNDEEP
htmlcssbuttonresponsive
Hip
Hip

Reputation: 87

How to create responsive buttons?

I have created multiple buttons in a horizontal line but now I have noticed that they are not responsive yet when I lower the browser size.

I have managed to make my logo responsive with calc(100%-1em); but I guess that won't help because the buttons are not width: 100% and I have multiple buttons in a row.

The scroll bar on the right is always on the button which I don't want to have.

I appreciate any help, thanks! 

.buttons-header {
margin-left: 1.5em;
}  



.buttons    {
            border: none;
            display: inline-block;
            height: 2em;
            width: 20em;
            line-height: 1.5em;
            margin-top: 0.5em;
            padding: 0.4em 0.4em;
            font-family: monospace;
            font-style: normal;
            text-align: center;
            text-decoration: none;
            background-color: #858585;
            color: #f0ffff;
            cursor: pointer;
            }

html:

 <div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>

Upvotes: 0

Views: 2195

Answers (3)

Monirul Islam Prince
Monirul Islam Prince

Reputation: 25

`<div style="text-align: center; width: auto;">
  <div style="margin:5px; display: inline-block;"><button name="submit" type="submit" value="Save" >Save</button>
    </div>
  <div style="margin:5px; display: inline-block;"><button name="submit" type="submit" value="Cancel" >Cancel</button></div>
</div>`

Horizontally button Show in web and mobile view

Upvotes: 0

Rarblack
Rarblack

Reputation: 4664

You should use Flex which has been added in HTML5. 

.flex-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.buttons-header {
margin-left: 1.5em;
} 
.buttons{
            border: none;
            height: 2em;
            width: 20em;
            line-height: 3em;
            margin-right:0.5em;
            margin-top: 0.5em;
            padding: 0.4em 0.4em;
            font-family: monospace;
            font-style: normal;
            text-align: center;
            text-decoration: none;
            background-color: #858585;
            color: #f0ffff;
            cursor: pointer;
 }
<div class='flex-container'>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
</div>

P.S. you can further play with line-width and margin-right to the get desired result.

Upvotes: 1

A. Campbell
A. Campbell

Reputation: 11

You could also use 

display:block;

in the place of 

display:inline-block;

in the case of phones

Upvotes: 1

Related Questions