CODEWITHSUNDEEP
csstwitter-bootstrap
nachime
nachime

Reputation: 1856

Round button that accommodates text

I've got this button below. It works okay but I want it to be able to change in size to accommodate different text lengths and sizes. For example, if I increase the font size, the button will get larger if the font size is too large (the text would extend past the button boundaries). How should I do this?

Also, why is it that bootstrap is making the text appear a little bit lower than where I intended it to be? (centered vertically) 

.round-btn {
    margin: 0 auto;
    display:block;
    width:150px;
    height:150px;
    line-height:150px;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    background-color: #17BAEF;
    font-size:20px;
    font-weight:bold;
   text-decoration: none;
   
  
}
.round-btn:hover {
   color: #17BAEF;
   background-color: #f5f5f5;
   text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="round-btn" href="#">Button</a>

Upvotes: 0

Views: 161

Answers (2)

Lowkase
Lowkase

Reputation: 5699

Ditch the width, height and line-height.

Make the button display:inline-block and play around with the padding:

https://jsfiddle.net/2b29j5pm/

.round-btn {
    margin: 0 auto;
    padding: 40px 30px;
    display:inline-block;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    background-color: #17BAEF;
    font-size:20px;
    font-weight:bold;
    text-decoration: none;
}

.round-btn:hover {
   color: #17BAEF;
   background-color: #f5f5f5;
   text-decoration: none;
}

I am not 100% happy with the answer because you will need to play around with the padding, but hopefully it gives you another option for a pure CSS answer.

Upvotes: 0

Simon Kraus
Simon Kraus

Reputation: 736

Get rid of the fixed width and height, set it as min- values, add padding to have a fitting space between text and circle borders and then set the width and height via javascript. this is the only way to achieve this as you need a square element:

$(function() {
  var $elem = $(".round-btn");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

you can also loop all buttons to target all buttons.

Upvotes: 1

Related Questions