You are here:
Print

Button Default

[latepoint_book_button]

The [latepoint_book_button] shortcode is inserted into any location of your site allowing you to launch the application from a button.

This button differs to the [latepoint_book_form] in that the booking screen floats above the existing page rather then displacing the content you have.

Default Button

Syntax

[latepoint_book_button]

Options

  • bg_color – To change the background color of the button (default is blue – #1449ff)
  • border – changing the border
  • border_radius – Corner radius size
  • caption – Text that is used for a button label (default is “Book Appointment”)
  • font_size – The font size for the button label
  • margin – The margin around the button
  • padding – Padding for the button content
  • text_color – option to change the color of the text (default is white – #ffffff)

Options

Syntax

[latepoint_book_button options="value"]

Background Button Color

bg_color – This changes the background color of the button.

The button default is #1449ff (latepoint blue) with the default text color of #ffffff (white).

Background color change

Syntax example

[latepoint_book_button bg_color="#827c7c"]

CSS Border – Shorthand property

border – The border property is a shorthand property

There are 3 shorthand properties the follow the CSS formatting rules. You can set the following border properties:

  • border-width
  • border-style (required)
  • border-color

Border width, style and color

Syntax example

[latepoint_book_button border="2px dotted #a10303" bg_color="#827c7c"]

border-style

Some standard border types are:

  • dotted – Defines a dotted border
  • dashed – Defines a dashed border
  • solid – Defines a solid border
  • double – Defines a double border
  • groove – Defines a 3D grooved border. The effect depends on the border-color value
  • ridge – Defines a 3D ridged border. The effect depends on the border-color value
  • inset – Defines a 3D inset border. The effect depends on the border-color value
  • outset – Defines a 3D outset border. The effect depends on the border-color value
  • none – Defines no border
  • hidden – Defines a hidden border

border-width

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

border-color

The border-color property is used to set the color of the four borders.

The color can be set by:

  • name – specify a color name, like “red”
  • HEX – specify a HEX value, like “#ff0000”
  • RGB – specify a RGB value, like “rgb(255,0,0)”
  • HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
  • transparent

Note:
If border-color is not set, it inherits the color off the element.

Border Radius

The border-radius property is used to add rounded borders to the button.

Border radius

Syntax example

[latepoint_book_button border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]

Button Label

Caption changes the text button label.

Caption

Syntax example

[latepoint_book_button caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]

Size of the Font

The font_size parameter is used to change the size by px of the text in the label.

Font_size

Syntax example

[latepoint_book_button font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]

Margins and Padding around the button

Margins

This refers the the space around the button from the borders edge in px for top, right, bottom and left.

Padding

The padding properties are used to generate space around an element’s content, inside the defined borders.

Margin and Padding Syntax

All the margin and padding properties can have the following values:

  • auto – the browser calculates the margin
  • length – specifies a margin or padding in px, pt, cm, etc.
  • % – specifies a margin or padding in % of the width of the containing element
  • inherit – specifies that the margin or padding should be inherited from the parent element

To shorten the code, it is possible to specify all the margin or padding properties into one property.

The margin or padding property is a shorthand property in the order of top, right, bottom and left.

Margins and Padding

Syntax margin example

[latepoint_book_button margin="10px 20px 5px" font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]
padding of button

Syntax padding example

[latepoint_book_button padding="50px 50px" margin="10px 20px 5px" font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]
button layout showing altered padding dimensions

Text Color

Last in the formatting line is the text_color property.

Text Color

Syntax example

[latepoint_book_button text_color=#a10303" padding="50px 50px" font_size="25px" margin="10px 20px 5px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]
Mistake Above

There is a mistake of ” missing in the above syntax. This renders the font and padding broken. NO error will display, it will just work but not format correctly.
It should read text_color=”#a10303″

Final result

With the right combinations you should be able to match the button to your theme colors, look and style.

Something Special

This button to the right incorporates a search, pop-up button, styling and many more css options that has also been included in the examples above.

This provides for quite a unique approach to choosing more than one service.

Centering your LatePoint button on the page

Using a div to center

This is not one of the easiest things to do as your theme and custom style sheets may interfere with the layout.

An option is to change your editing mode to “Code Editor” and to wrap your shortcode with a div with text centering styling.

  1. Position your cursor where you need the shortcode.
  2. Switch to Code editor from the options menu.

3. Paste the div with styling and your LatePoint shortcode like the below:

<div style="width:290px;margin:auto;text-align:center;">[latepoint_book_button selected_service="11" selected_service_extra="3"]</div>

This should now have place your shortcode into the center of the screen.

Switch back to visual editor once you are done.

Was this article helpful?
4.8 out Of 5 Stars
5 Stars 33%
4 Stars 67%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Table of Contents