random color

<!DOCTYPE html>
<html>
<body style="font-family:roboto;background-color:#edded9">

<style>
:root {
  --color-one: #264143;
  --color-two: #edded9;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn {
  padding: 15px 32px;
  text-transform: uppercase;
  border-radius: 6px;
  border: 3px solid var(--color-one);
  cursor: pointer;
  transition: background-color 0.5s linear, color 0.5s ease-out, transform 0.3s ease-out;
}

.btn:hover {
  transform: translateY(-5px);
}

.button-one {
  background-color: var(--color-one);
  color: var(--color-two);
}

.button-one:hover {
  color: var(--color-one);
  background-color: var(--color-two);
}

.button-two {
  background-color: var(--color-two);
  color: var(--color-one);
}

.button-two:hover {
  background-color: var(--color-one);
  color: var(--color-two);
}
</style>

<center>
<h2>Random Color Generator</h2>

<div id='colorhex'>#edded9</div>
<br>
<button class="btn button-one" onclick="Confirm()">Generate</button>

</center>
<p id="demo"></p>

<script>
function Confirm() {
  var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = randomColor
  document.getElementById('colorhex').innerHTML = randomColor
  document.documentElement.style.setProperty('--color-two', randomColor);
}
</script>

<script>
const cursor = document.createElement('div')
const child = document.createElement('div')

const cursorDefaultStyle = `
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: 2px solid #264143;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 0; left: '0';
    transition: 150ms;
    pointer-events: none;
`

const childDefaultStyle = `
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #264143;
    position: fixed;
    top: 0; left: '0';
    transform: translate(-50%, -50%);
    transition: 100ms;
    pointer-events: none;
`

cursor.style.cssText = cursorDefaultStyle
child.style.cssText = childDefaultStyle

document.body.appendChild(cursor)
document.body.appendChild(child)

let isActived = false

window.addEventListener('mousemove', (event) => {
    if (isActived) return

    cursor.style.top = child.style.top = `${event.clientY}px`
    cursor.style.left = child.style.left = `${event.clientX}px`
})

const onHover = document.querySelectorAll('.onHover')
const fixed = (event, getTransition) => {
    event.stopPropagation()
    isActived = true
    const element = event.currentTarget
    const { width, height, top, left } = element.getBoundingClientRect()

    const style = window.getComputedStyle(element)
    const borderRadius = style.getPropertyValue('border-radius')
    const transition = style.getPropertyValue('transition')

    cursor.style.cssText = `
            ${cursorDefaultStyle}
            width: ${width}px;
            height: ${height}px;
            border-radius: ${borderRadius};
            top: ${top}px;
            left: ${left}px;
            transform: translate(0, 0);
            border-color: white;
            ${(getTransition) ? `transition: ${transition};`: ''}
        `

    child.style.cssText = `
            ${childDefaultStyle}
            display: none
        `
}

for (const hover of onHover) {
    hover.addEventListener('mousedown', (event) => fixed(event, true))
    hover.addEventListener('mouseup', (event) => fixed(event, true))
    hover.addEventListener('mouseover', (event) => fixed(event, false))
    hover.addEventListener('mouseleave', (event) => {
        isActived = false
        
        cursor.style.cssText = cursorDefaultStyle
        child.style.cssText = childDefaultStyle
    })
}
</script>

</body>
</html>
Editor is loading...