# Button

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FyElKN5eMhFO3HOhKQhp1%2Fimage2017-9-13_17-29-53.png?alt=media&#x26;token=a0958895-a239-4a1d-9677-74ea166751d4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2Fcl7HWrH44fQ42ZqsuFHN%2Fimage2017-9-22_20-48-37.png?alt=media&#x26;token=c43b54f5-8686-4bb6-b24c-c306cae16eaf" alt=""><figcaption></figcaption></figure>

## Description

For the Button you can define different styles and sizes and and link it to a URL.

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Button” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FBWRbdwsaD132qeeH0qn5%2Fimage2017-9-13_17-31-42-768x469.png?alt=media&#x26;token=4fae41a1-d777-4d5f-9839-51aa4d98fc2c" alt=""><figcaption></figcaption></figure>

### **Text**

Enter the text of the button.

### **Style**

Select one of the [Bootstrap color styles.](https://lewe.gitbook.io/bootstrap-visuals-for-confluence/user-guide/bootstrap-color-styles)

### **Size**

Select the size of the button.

### **Outline**

Check if you want to display the button with an outline only. This feature can only be applied to the flat buttons (not the 3D styles).

### **Link**

You can link the button to a URL. Enter it here and include http\:// or https\://.

### **Link Tooltip**

Since Version 1.3.0

This text will be shown as an HTML tooltip when you hover over a button that has a link.

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FckqWGQWTgkDzoufgIFgq%2Fimage2017-10-12_20-4-41.png?alt=media&#x26;token=bdea08c5-607b-4da8-96cf-a1508e50313d" alt=""><figcaption></figcaption></figure>

### **Target**

Select where to load the linked page, in the same window or a new tab.

### **Custom Text Color**

You can overwriite the Bootstrap text color here that is defined by the style you selected. You can enter any hexadecimal color vlaue here, preceded by a hash, e.g. #990000.

### **Custom Background Color**

You can overwriite the Bootstrap background color here that is defined by the style you selected. You can enter any hexadecimal color vlaue here, preceded by a hash, e.g. #990000. However, this will not work with the 3D styles because they will create a default color gradient for your button.