# Pontos nos cantos (B 154)

Categoria: Botões  
Tags: bracket, corner-mark, rounded, dots, outline  
Página: https://designforai.dev/pt/snippet/btn-154

## Prompt

Um botão creme #fff7ed com borda tracejada de 1px #fdba74, raio de 6px, texto marrom #7c2d12 14px semibold, padding 13px por 26px. No hover a borda vira sólida laranja #f97316 e dois pontos laranja de 7px saltam para fora (escala com efeito de mola a partir de 0) nos cantos superior esquerdo e inferior direito, como alfinetes. Active #ffedd5. Focus com outline laranja de 2px e offset de 5px.

## HTML

```html
<button class="btn-154">Pin</button>
```

## CSS

```css
.btn-154 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  transition: border-color .2s,background .2s
}
.btn-154::before,.btn-154::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f97316;
  transform: scale(0);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1)
}
.btn-154::before {
  top: -4px;
  left: -4px;
  box-shadow: 0 0 0 0 #f97316
}
.btn-154::after {
  bottom: -4px;
  right: -4px
}
.btn-154:hover {
  border-style: solid;
  border-color: #f97316
}
.btn-154:hover::before,.btn-154:hover::after {
  transform: scale(1)
}
.btn-154:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 5px
}
.btn-154:active {
  background: #ffedd5
}
```