CODEWITHSUNDEEP
htmlcss
inhwrbp
inhwrbp

Reputation: 609

Perfectly centering text in round button?

I am trying to create a round button that rotates on hover. As you can see from the animation, the text doesn't seem to be centered perfectly which causes a weird rotation of the +.

Here is the code I have:

button {
  margin: 0;
  padding: 0;
  font-size: 15px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
}

button:hover {
  transform: rotate(360deg);
}
<button>+</button>

Upvotes: 0

Views: 1779

Answers (5)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

It seems a little hard to exactly center align the text. But it is more easy to center align a shape. So as an alternate option, I created "+" with after and before pseudo elements and it rotates very well. you may check the below code. 

button {
  margin: 0;
  padding: 0;
  font-size: 15px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
  position: relative;
}
button:after,
button:before{
  background: red;
  position: absolute;
  content: "";
  display: block;
  z-index: 1;
}
button:after{
  top: 20px;
  bottom: 20px;
  left: 24px;
  right: 24px;
}
button:before{
  top: 24px;
  bottom: 24px;
  left: 20px;
  right: 20px;
}

button:hover {
  transform: rotate(360deg);
}
<button></button>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105883

Your text stands on the baseline. you can either push it up via a padding equal of average 0.2em or use an inline-block pseudo and vertical-align.

examples below

button {
  margin: 0;
  padding: 0;
  font-size: 15px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
}

button:hover {
  transform: rotate(360deg);
}
button.ib:before {
content:'';
display:inline-block;
height:50px;
vertical-align:middle;
width:0;
margin:0 -0.05em;
}
.pad {
box-sizing:border-box;
padding-bottom:0.175em;
}
p {
text-align:center;
background:yellow;
}
p:after {
content:'';
display:inline-block;
width:120vw;
margin-left:-50vw;
border-bottom:red solid 1px;
}
<button class="ib">+</button>
<button class="pad">+</button>
<p> where is baseline ? </p>

Upvotes: 1

Awsme Sandy
Awsme Sandy

Reputation: 1408

Check this

button {
  margin: 0;
  padding: 0;
  font-size: 15px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
  font-family: arial;
    line-height: 50px;
}

button:hover {
  transform: rotate(360deg);
}
button:before{
content:"";
}
<button>+</button>

Upvotes: 1

Geethu Jose
Geethu Jose

Reputation: 1993

Use display: flex and align the button text horizontally and vertically as 

  display:flex;
  justify-content:center;
  align-items:center;


button {
  font-size: 15px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
}

button:hover {
  transform: rotate(360deg);
}
<button>+</button>

Upvotes: 0

Sergey
Sergey

Reputation: 7692

Added text-align: center, line-height: 50px, box-sizing: border-box and increased the size of plus to make it's movement easy to see.

button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 34px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  transition: transform 2s;
  text-align: center;
  line-height: 50px;
}

button:hover {
  transform: rotate(360deg);
}
<button>+</button>

Upvotes: 0

Related Questions