Can someone show with a simple example how to transform an action call button into a round floating button moving from the center of the page to the bottom right corner?

Closed due to the fact that the essence of the question is not clear to the participants 0xdb , Air , LFC , freim , aleksandr barakin 5 Apr at 13:50 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    3 answers 3

    I would do that, smoothly changing the transform:position and border-radius :

     body { margin:0 } div.btn { user-select: none; text-align:center; line-height:50px; border: 1px solid black; cursor: pointer; width:50px; height:50px; animation: transform-to-circle 2s forwards, to-left-down-corner 2s forwards; } div.btn div{ animation: rotate-text-back 2s forwards; } div.btn:hover { border: 1px solid black; background-color: lightgray; transition:200ms; } div.btn:active { background-color: gray; } @keyframes to-left-down-corner { from { transform: translate(50vw,50vh) translate(-50%,-50%) rotate(0); } to { transform: translate(100vw,100vh) translate(-100%,-100%) rotate(90deg); } } @keyframes rotate-text-back { from { transform: rotate(0); } to { transform: rotate(-90deg); } } @keyframes transform-to-circle { to { border-radius: 50%; transform:rotate(90deg); } } 
     <div class="btn"><div>hello</div></div>

    PS: As a bonus, rotate the square and the text inside it back

      Something like this can be done:

       .button { position: fixed; right: calc(50% - 40px); bottom: calc(50% - 40px); margin: auto; width: 80px; height: 80px; box-sizing: border-box; padding-top: 12px; border-radius: 50%; text-align: center; color: white; font-size: 14px; font-family: sans-serif; background-color: rgba(255, 0, 0, .5); box-shadow: 1px 2px 5px rgba(255, 0, 0, .5); transition: .3s; cursor: pointer; animation: transit 2s linear forwards; animation-delay: 2s; } .button:after { content: ''; display: block; position: absolute; top: 0; left: 0; background-color: red; width: 100%; height: 100%; z-index: -1; border-radius: 50%; animation: circle 1.5s linear infinite; } .button:hover { text-decoration: none; color: red; background-color: white; } .button:hover:after { animation: 0; background-color: transparent; } @keyframes circle { 100% {opacity: 0; transform: scale(1.5);} } @keyframes transit { 100% {right: 10px; bottom: 10px;} } 
       <div class="button"> кнопка призыва действия </div>

        You can somehow

         const button = document.getElementById('button') button.onclick = function(e){ return e.target.classList[1] ? e.target.classList.remove("active") : e.target.classList.add("active"); } 
         html,body { height: 100%; } .wrapper { display: flex; height: 100vh; width: 100%; background-color: #ffffff; border: 1px solid red; flex-direction: row; justify-content: center; align-items: center; } .button { background-color: green; transition: all, 0.5s; } .active { transform: translate(40vw, 40vh); } 
         <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class='wrapper'> <button id='button' class='button'>BUTTON</button> </div> </body> </html>

        • Welcome to ru.stackoverflow - Alexandr_TT