<!DOCTYPE html> <html lang="EN-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> body { background-color: red; } p { padding: 7px; margin-left: -8px; margin-right: -8px; font-family: Lobster, 'San Serf'; background: lightyellow; } h2, #buttons { text-align: center; } </style> </head> <body> <h2>Button Example</h2> <p> This is an example paragraph. Notice what happens when you change the screen size. </p> <hr> <div id="buttons"> <button id="red">Red</button> <button id="green">Green</button> <button id="blue">Blue</button> </div> <script> let body = document.querySelector('body'); document.querySelector('#red').onclick = function() { body.style.backgroundColor = 'red'}; document.querySelector('#green').onclick = function() { body.style.backgroundColor = 'green'}; document.querySelector('#blue').onclick = function() { body.style.backgroundColor = 'blue'}; </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more