Fully circular buttons with dynamic size - html

Question

I am trying to create circular buttons in CSS. I use border-radius: 100% to make the button look like a circle but it only works if I explicitly set the width and height of the element. But if I do so, the buttons will not adjust to fix larger text
This is what I've tried so far:
.round-button{
width: 60px;
height: 60px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button">Button</button>
</div>
<div>
<button class="round-button">This text will overflow the button!</button>
</div>
As you can see the first button looks pretty OK, but the text in the second button overflows it. I've used overflow: hidden to prevent it from looking ugly but I would like the buttons size to adjust according to the content's size. Is that possible?

Answer 1

In order to draw a circle, you need a square to start with .
You can insert a pseudo of an height equal to width using vertical padding with percentage value.
https://www.w3.org/TR/CSS2/box.html#padding-properties
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
Make this pseudo inline-block to help yoy center text.
If text has to wrap a few lines, it needs to be wraped within an inline-block .. if you use an inline-block pseudo.
You can set max and min width too.
example:
.round-button{
min-width: 60px;
max-width:120px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding:0;
}
.round-button:before {
content:'';
display:inline-block;;
vertical-align:middle;
padding-top:100%;
}
span {
display:inline-block;
vertical-align:middle;
max-width:90%;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button"><span>Button</span></button>
</div>
<div>
<button class="round-button"><span>This text should NOT overflow the button!</span></button>
</div>

Answer 2

You are looking for an automatic way of making the width and height equal while it increases its size. If so, I don't think there's a way you can do that in CSS. I mean you don't expect width=height do you?
I'm not sure but JQuery might be the solution because it has operators and can interact with CSS.
Edit After reading the previous answer, I now understand that there's a way to do it in padding. But in my answer I said "I don't think". I loved the solution of #GCyrillus BTW.