Scribd
Upload
2 views

Copilot Button Effect

This document is an HTML code for a simple webpage featuring a gradient background and a central button. The button is styled with various effects and is surrounded by four directional arrows. The layout is designed to be visually appealing and interactive.

Uploaded by

class1020252026
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Copilot Button Effect

This document is an HTML code for a simple webpage featuring a gradient background and a central button. The button is styled with various effects and is surrounded by four directional arrows. The layout is designed to be visually appealing and interactive.

Uploaded by

class1020252026
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
<style>
body {
/* Gradient background from light blue to dark blue */
background: linear-gradient(to right, #0575E6, #021B79);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
position: relative;
}
#clickButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
outline: none;
color: #fff;
background-color: #111;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5),
0 0 20px rgba(0, 255, 255, 0.5),
0 0 30px rgba(0, 255, 255, 0.5),
0 0 40px #00ffff,
0 0 70px #00ffff,
0 0 80px #00ffff,
0 0 100px #00ffff;
transition: all 0.3s ease-in-out;
position: relative; /* To position arrows relative to the button */
z-index: 2; /* To ensure button is above arrows */
}
.arrow {
color: #00ffff;
font-size: 24px;
position: absolute;
z-index: 1; /* Below the button */
}
#arrowUp {
top: calc(50% - 60px);
left: 50%;
transform: translateX(-50%);
}
#arrowRight {
top: 50%;
right: calc(50% - 100px);
transform: translateY(-50%) rotate(90deg);
}
#arrowDown {
bottom: calc(50% - 60px);
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
#arrowLeft {
top: 50%;
left: calc(50% - 100px);
transform: translateY(-50%) rotate(-90deg);
}
</style>
</head>
<body>
<div id="arrowUp" class="arrow">↑</div>
<div id="arrowRight" class="arrow">→</div>
<div id="arrowDown" class="arrow">↓</div>
<div id="arrowLeft" class="arrow">←</div>
<button id="clickButton">Click</button>
</body>
</html>

You might also like