# Marcas nos quatro cantos (B 152)

Categoria: Botões  
Tags: bracket, corner-mark, rectangle, outline, viewfinder  
Página: https://designforai.dev/pt/snippet/btn-152

## Prompt

Um botão pálido #f8fafc com borda de 1px #e2e8f0, cantos retos, texto #0f172a 14px semibold, padding 14px por 26px. No hover, quatro marcas de visor (traços em L de 10px por 2px, feitos com gradientes de fundo em dois pseudo-elementos espelhados) aparecem em fade ao redor do lado de fora e se aproximam de 5px para 3px da borda, como uma câmera travando o foco. Active #e2e8f0. Focus com outline de 2px e offset de 6px para não encostar nas marcas.

## 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
}
```