Design for AI

Corner dot markers

Corner dot markers: a CSS button. Copy the rules, or the prompt that rebuilds it.

bracketcorner-markroundeddotsoutline

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
}
HTML
<button class="btn-154">Pin</button>
Prompt

A cream #fff7ed button with a 1px dashed #fdba74 border, 6px radius, brown #7c2d12 14px semibold text, 13px by 26px padding. On hover the border becomes solid orange #f97316 and two 7px orange dots pop out (springy scale from 0) on the top-left and bottom-right corners like pins. Active #ffedd5. Focus 2px orange outline offset 5px.

Same shelf