# Four-corner ticks (B 152)

Category: Buttons  
Tags: bracket, corner-mark, rectangle, outline, viewfinder  
Page: https://designforai.dev/snippet/btn-152

## Prompt

A pale #f8fafc button with a 1px #e2e8f0 border, square corners, #0f172a 14px semibold text, 14px by 26px padding. On hover four viewfinder ticks (10px by 2px L marks, built from gradient backgrounds on two mirrored pseudo-elements) fade in around the outside and tighten from 5px to 3px away from the edge, like a camera locking focus. Active #e2e8f0. Focus 2px outline offset 6px so it clears the ticks.

## HTML

```html
<button class="btn-152"><span>Focus</span></button>
```

## CSS

```css
.btn-152 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .2s
}
.btn-152 span {
  position: relative;
  z-index: 1
}
.btn-152::before,.btn-152::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background: linear-gradient(#0f172a,#0f172a) top left/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) top left/2px 10px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/2px 10px no-repeat;
  opacity: 0;
  transition: opacity .2s,inset .2s
}
.btn-152::after {
  transform: scaleX(-1)
}
.btn-152:hover::before,.btn-152:hover::after {
  opacity: 1;
  inset: -3px
}
.btn-152:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 6px
}
.btn-152:active {
  background: #e2e8f0
}
```