I want to realize the following: when I press the button, a round block disperses in all directions. Here is an example on a bourgeois site (see the meira and adstod buttons).

As I understand it: I have a button, there is a big div with rounded corners initially hidden (display: none?). And what to do next - I do not know. I will be glad to any tips and help. thank you in advance!

    2 answers 2

    document.getElementById('button').addEventListener('click', function() { this.classList.toggle('button_active'); }); 
     .container { position: relative; } .button { position: absolute; top: 0; left: 0; height: 30px; width: 30px; background-color: red; border-radius: 50%; transition: all .3s ease; } .button_active { height: 300px; width: 300px; transform: translate(-25%, -25%); } 
     <div class="container"> <div class="button" id="button"></div> </div> 

       var growth = false; var get = function(obj) { return document.getElementById(obj) }; get('two').onclick = function() { if (growth) { get('one').style.width = '50px'; get('one').style.height = '50px'; get('one').style.left = '0px'; get('one').style.top = '0px'; growth = false } else { get('one').style.width = '500px'; get('one').style.height = '500px'; get('one').style.left = '-250px'; get('one').style.top = '-250px'; growth = true } } 
       body { margin: 0; } #one { width: 50px; height: 50px; border-radius: 500px; background-color: black; transition: 0.5s; position: absolute; } #two { width: 50px; height: 50px; z-index: 5; border-radius: 50px; background-color: white; position: absolute; } 
       <html> <body> <div id='one'></div> <div id='two'></div> </div> </body> </html>