CODEWITHSUNDEEP
buttonsizeconstraints
j1nma
j1nma

Reputation: 467

Constraining button size

I need to constrain this button so the yellow border fits perfectly around the plus, just like the "Go". enter image description here

Here is the button's CSS, for aid:

 #addinput{
        border-radius: 10px;
        font-family: 'Belgrano', serif;
        color: #FFE200;
        text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
        background:transparent;
        font-size: 3em;
        height:50%;
        background-size: 40% auto;
        display:block;
        border:1px solid yellow;
    }

pic 2

enter image description here

Upvotes: 0

Views: 48

Answers (3)

Jan.J
Jan.J

Reputation: 3080

Set height value in px, and line-height maybe a little less, also in px. See jsfiddle.

#addinput{
    border-radius: 10px;
    font-family: 'Belgrano', serif;
    color: #FFE200;
    text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
    font-size: 3em;
    display: block;
    border: 1px solid yellow;
    height: 40px;
    line-height: 30px;
}

Upvotes: 1

Durty
Durty

Reputation: 457

You can try wrapping the + in a paragraph inside the container:

​<div id="addinput"><p>+</p></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Then the CSS would be:

#addinput p {
  margin-bottom: -10px; 
  margin-top: -10px;     
}

Upvotes: 0

Lance Pioch
Lance Pioch

Reputation: 1167

The height:50% is causing it to stretch, if you remove that the border will fit perfectly around it all the way.

Upvotes: 0

Related Questions