Periscope Lens
Brass periscope rim around a glowing cyan lens with crosshair etching. Hover pulses the lens like a sub coming online.
Periscope Lens the 43rd of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-peri"> <span class="btn-peri-rim" aria-hidden="true"></span> <span class="btn-peri-cross" aria-hidden="true"></span> <span class="btn-peri-text">SCAN</span> </button>
.btn-peri {
position: relative;
width: 110px; height: 110px;
border: none; border-radius: 50%;
background:
radial-gradient(circle at center,
#0a1a2a 0%,
#0a3a5a 35%,
#00d4ff 75%,
#6ef0ff 100%);
color: #0a1a2a;
font-family: ui-monospace, monospace;
font-size: 11px; font-weight: 800;
letter-spacing: 0.22em;
cursor: pointer;
display: grid; place-items: center;
isolation: isolate;
box-shadow:
inset 0 0 0 8px #b87333,
inset 0 0 0 10px #6a3f15,
0 0 24px rgba(0,212,255,0.3),
0 6px 14px rgba(0,0,0,0.4);
}
.btn-peri-rim {
position: absolute; inset: 12px;
border: 1.5px solid rgba(0,212,255,0.5);
border-radius: 50%;
pointer-events: none;
animation: btn-peri-pulse 2.4s ease-in-out infinite;
}
.btn-peri-cross {
position: absolute; inset: 12px;
pointer-events: none;
}
.btn-peri-cross::before, .btn-peri-cross::after {
content: '';
position: absolute;
background: rgba(0,212,255,0.5);
}
.btn-peri-cross::before {
top: 50%; left: 0; right: 0; height: 1px;
transform: translateY(-50%);
}
.btn-peri-cross::after {
left: 50%; top: 0; bottom: 0; width: 1px;
transform: translateX(-50%);
}
.btn-peri-text {
position: relative; z-index: 1;
background: rgba(0,212,255,0.85);
padding: 4px 8px;
border-radius: 2px;
color: #0a1a2a;
text-shadow: 0 0 4px rgba(0,212,255,0.4);
}
@keyframes btn-peri-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn-peri-rim { animation: none; }
}
.btn-peri:hover {
box-shadow:
inset 0 0 0 8px #b87333,
inset 0 0 0 10px #6a3f15,
0 0 36px rgba(0,212,255,0.55),
0 6px 14px rgba(0,0,0,0.4);
}