<div class="box">LOREM IPSUM</div>
<div class="actions">
  <div class="action">
    <button id="width">Width</button>
  </div>
  <div class="action">
    <button id="rotate">Rotate</button>
  </div>
  <div class="action">
    <button id="bgcolor">Bg Color</button>
  </div>
  <div class="action">
    <button id="color">Text color</button>
  </div>
  <div class="action">
    <button id="reset">Reset</button>
  </div>
</div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background-color: #04142F;
  font-family: sans-serif;
  font-size: 1.5rem;
  text-align: center;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 100px;
  height: 100px;
  background-color: #013BC2;
  transition: all 0.2s ease-out;
  color: white;
}

.actions {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}
button {
  padding: 0.3rem 1rem 0.4rem 1rem;
  font-size: 1rem;
  background-color: hsl(218, 84%, 10%);
  border: solid 1px hsl(218, 84%, 30%);
  border-radius: 4px;
  color: hsl(218, 84%, 80%);
  cursor: pointer;
  transition:
    background-color 0.1s ease-out,
    color 0.1s ease-out;
}
button:hover {
  background-color: hsl(218, 84%, 30%);
  color: hsl(218, 84%, 100%);
}
const box = document.querySelector('.box');


const widthBt = document.querySelector('#width');

widthBt.addEventListener('click', () => {
  box.style.width = "150px"
})


const rotateBt = document.querySelector('#rotate');

rotateBt.addEventListener('click', () => {
  box.style.transform = "rotate(10deg)";
})


const colorBt = document.querySelector('#color');

colorBt.addEventListener('click', () => {
  box.style.color = "#013BC2"
})


const bgColorBt = document.querySelector('#bgcolor');

bgColorBt.addEventListener('click', () => {
  box.style.backgroundColor = "white";
});


const resetBt = document.querySelector('#reset');

resetBt.addEventListener('click', () => {
  box.style = {};
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.