Question 405636 in Html Question posted in
Some basic documentation can be found here.

Html – How can I animate a button without moving the text within?

I have a button to which I applied a costant, rotating animation.

@keyframes rotateinf {
  from { transform: rotate(  0deg); }
   to  { transform: rotate(360deg); }
}

The problem is: the child text gets the animation applied too.

I managed to make a cheap workaround for this problem, I created a element and set the position to absolute, placing it directly on top of the button with top and right attributes.
The imptxt class just establishes the font.

<span class="imptxt" style="position: absolute;z-index: 10; color: black; top:40%; right:44%; pointer-events: none;"
  >
  All about
</span>
<span class="imptxt" style="position: absolute;z-index: 10; color: black; top:48%; right:48%; pointer-events: none;"
  >
  me
</span>
<button id="trns" class="buttonrot" onmousedown="redirect()"></button>

The buttonrot class is the following:

padding: 200px ;
  border-radius: 50px;
  z-index: 9;
  animation:fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;

This is the result (.gif):

Is there an actual and better way to make the text stay still and apply the rotating animation on the button?

Code snippet:

.buttonrot {
  padding: 200px;
  border-radius: 50px;
  z-index: 9;
  animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
}

@keyframes rotateinf {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<span class="imptxt" style=" position: absolute;z-index: 10; color: black; top:40%; right:44%; pointer-events: none;">All about</span>
<span class="imptxt" style="position: absolute;z-index: 10; color: black; top:48%; right:48%; pointer-events: none;">me</span>
<button id="trns" class="buttonrot" onmousedown="redirect()"></button>
Tags:

2

Answers


  1. 0

    Put the text in a span inside the button and the reverse the animation on the span

    .buttonrot {
  padding: 50px;
  border-radius: 10px;
  animation: rotateinf 10s linear infinite;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

.buttonrot span {
  display: inline-block;
  animation: rotateinf 10s linear reverse infinite;
}

@keyframes rotateinf {
  100% {
    transform: rotate(360deg);
  }
}
    <button id="trns" class="buttonrot" onmousedown="redirect()"><span>All About Me</span></button>
    Login or Signup to reply.
  2. 0

    You can even use the ::after property to achieve what you want, without any additional element.

    .buttonrot {
  padding: 50px;
  border-radius: 10px;
  animation: rotateinf 10s linear infinite;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

.buttonrot::after {
  content: attr(data-text);
  display: inline-block;
  animation: rotateinf 10s linear reverse infinite;
}

@keyframes rotateinf {
  100% {
    transform: rotate(360deg);
  }
}
    <button id="trns" class="buttonrot" onmousedown="redirect()" data-text="About Me"></button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search