# Brillo superior glossy (B 073)

Categoría: Botones  
Etiquetas: shine, gloss, static-highlight, rounded  
Página: https://designforai.dev/es/snippet/btn-073

## Prompt

Un botón glossy azul cielo #0284c7 con texto blanco de 15px en negrita, radio de 12px, padding de 14px por 28px y una sombra azul. La mitad superior lleva un reflejo blanco estático (del 40% al 5%) con el borde inferior curvado, dando un aspecto estilo aqua. Hover #0369a1, active #075985 sin sombra. Anillo de foco azul translúcido.

## HTML

```html
<button class="btn-073">Glossy</button>
```

## CSS

```css
.btn-073 {
  position: relative;
  overflow: hidden;
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0284c7;
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(2,132,199,.4);
  transition: background .15s
}
.btn-073::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05));
  border-radius: 12px 12px 40% 40%
}
.btn-073:hover {
  background: #0369a1
}
.btn-073:focus-visible {
  outline: 3px solid rgba(2,132,199,.5);
  outline-offset: 2px
}
.btn-073:active {
  background: #075985;
  box-shadow: none
}
```