There is a blue text in this code and the phrase "click here" is written next to it. By placing the mouse cursor on the blue text or clicking on it, a blue box is formed around the blue text. This box also has a blue shade. By displaying the box, the color of the text turns blue. This box is displayed with a delay of a few seconds.
HTML
<!-- This script got from www.devanswer.com -->
<p1>Click text</p1>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Devanswer.com
</a><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
p1 {
color: white;
font-weight: bold;
}
a {
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.25s;
}
a:hover {
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}