> For the complete documentation index, see [llms.txt](https://customlauncher.gitbook.io/customlauncher/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://customlauncher.gitbook.io/customlauncher/launcher-editor/panel-editor/editor/campo-de-elementos/boton.md).

# Botón

<details>

<summary>Propiedades</summary>

<figure><img src="/files/Ul9mt8n4VuMfarLCWeSe" alt="" width="371"><figcaption></figcaption></figure>

#### <mark style="color:red;">Nombre al ID del botón:</mark>

Aquí irá el nombre como ID que quieres identificarlo a tu elemento creado.

***

#### <mark style="color:red;">X, Y, Ancho y Alto:</mark>

Aquí puedes configurar la posición exacta por coordenadas que deseas que esté posicionado tu elemento.

***

#### <mark style="color:red;">Radio de borde:</mark>

Aquí puedes modificar el radio de las esquinas del elemento para generar efecto de borde.

***

#### <mark style="color:red;">Capa:</mark>

Aquí va el número de capas que quieres especificar tu elemento. Esto hará que tu elemento se muestre por encima de los demás.

***

#### <mark style="color:red;">Botón animado:</mark>

{% hint style="info" %}
*<mark style="color:red;">**Esta función solo está disponible para las cuentas PRO**</mark>*
{% endhint %}

Al activar esta opción, hará que tu botón tenga una animación de escalado simulando la animación de un botón real.

***

#### <mark style="color:red;">Ocultar al inicio:</mark>

Esto hará que tu elemento se oculte al principio de ejecutarse tu lanzador. Es decir, que se mostrará oculto por defecto.

</details>

<details>

<summary>Contenido</summary>

<figure><img src="/files/QftHbvg4XNu9J1RDvL2q" alt="" width="374"><figcaption></figcaption></figure>

#### <mark style="color:red;">Botón sin imagen:</mark>

Aquí puedes alternar entre usar imágenes o colores para tu botón.

* Normal: Se muestra como aspecto inicial.
* Hover: Se muestra el aspecto cuando el cursor está encima del elemento.
* Clic: Se muestra el aspecto cuando se hace clic en el elemento.

{% hint style="info" %}
Para el botón a color puedes copiar o pegar un código de color hexadecimal de otra propiedad que use color  o del portapapeles.
{% endhint %}

<figure><img src="/files/Cp8JNwRXNUY6w8gJvpeV" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">Sonido Hover:</mark>&#x20;

Aquí puedes seleccionar un archivo de sonido que se reproducirá cuando el cursor pasa por encima del botón.&#x20;

#### <mark style="color:red;">Sonido Clic:</mark>&#x20;

Aquí puedes seleccionar un archivo de sonido que se reproducirá cuando haces clic en el botón.

</details>

<details>

<summary>Texto</summary>

<figure><img src="/files/1Ua0inL0TDLIACpqSTtx" alt="" width="373"><figcaption></figcaption></figure>

#### <mark style="color:red;">Texto del botón:</mark>

Aquí irá el texto que deseas mostrar en el botón.

#### <mark style="color:red;">Color de fuente:</mark>

Aquí puedes elegir el color que prefieras que tenga el texto del botón en hexadecimal. También tienes los botones de copiar o pegar un color si deseas traer o llevar un color de otro lado.

#### <mark style="color:red;">Nombre de fuente:</mark>

Aquí eliges el nombre de la fuente que deseas para tu texto.

#### <mark style="color:red;">Estilos de texto:</mark>

Personaliza la apariencia del texto aplicando formatos como **negrita**, *cursiva*, subrayado, ~~tachado~~ o convirtiéndolo a **MAYÚSCULAS**.

#### <mark style="color:red;">Posición del texto:</mark>

Aquí puedes elegir entre las opciones de

* <mark style="color:$success;">Izquierda:</mark> El texto se posicionará desde el lado izquierdo.
* <mark style="color:$success;">Centrado:</mark> El texto se posicionará en el centro.
* <mark style="color:$success;">Derecha:</mark> El texto se posicionará desde el lado derecho.

#### <mark style="color:red;">Tamaño de fuente:</mark>

Aquí puede elegir el número de tamaños de la fuente del texto. Mientras más alto sea el número, más grande el tamaño del texto.

#### <mark style="color:red;">Automático:</mark>

Activa si quieres que el texto se escale automáticamente al redimensionar el elemento.

</details>

<details>

<summary>Acciones</summary>

<figure><img src="/files/Wo7ji5yppbonF8zoTZV6" alt="" width="372"><figcaption></figcaption></figure>

#### <mark style="color:red;">Lista de acciones:</mark>

Aquí puedes seleccionar la acción que desees y seguidamente le das al botón de "<mark style="color:orange;">**Agregar**</mark>". Esto hará que se agregue la acción seleccionado al campo de "<mark style="color:orange;">**Acciones agregadas**</mark>".

***

#### <mark style="color:red;">Acciones agregadas:</mark>

Aquí se almacenarán las acciones que agregues, las cuales puedes editar, mover de orden de ejecución o eliminar una acción en específica si lo deseas.

<a href="/pages/TuS3diKDA7L5CvXWhMcg" class="button primary" data-icon="star-christmas">Ver lista de acciones</a>

</details>