Ghost buttons are basically simple bordered buttons, without a background fill. They are 'see through' and normally contain some button text or an icon. Frontend frameworks like Bootstrap have supported ghost or 'outlined' buttons for a while. Our GhostButtons stack makes the creation of custom ghost buttons a whole lot easier. If you search the web for 'ghost buttons inspiration' you will find some lovely examples to draw inspiration from.
Because buttons are a fundamental part of webpage navigation, it is vital they promote the highest standards of accessibility. Which this in mind, GhostButtons uses conventional HTML markup for links and allows you to apply any custom attributes of your choosing. Like ARIA labels, which can be read aloud by assistive devices such as screen readers. GhostButtons offers everything you need for creating these iconic buttons.
Tip: If you need a button stack with an even more extensive choice of style and colour options, take a look at our ButtonMaker or EZ Flex Button stacks.
GhostButtons is compatible with all ThemeFlood themes. Theme compatibly with themes from other companies varies, because some themes forcefully apply other stylistic, animation or transitional effects on links that can break ghost buttons. If you want to use icons inside your buttons, we recommend you use a theme with built-in Font Awesome 5 icons. GhostButtons does not include Font Awesome icons.
Because buttons are a fundamental part of webpage navigation, it is vital they promote the highest standards of accessibility. Which this in mind, GhostButtons uses conventional HTML markup for links and allows you to apply any custom attributes of your choosing. Like ARIA labels, which can be read aloud by assistive devices such as screen readers. GhostButtons offers everything you need for creating these iconic buttons.
Tip: If you need a button stack with an even more extensive choice of style and colour options, take a look at our ButtonMaker or EZ Flex Button stacks.
GhostButtons is compatible with all ThemeFlood themes. Theme compatibly with themes from other companies varies, because some themes forcefully apply other stylistic, animation or transitional effects on links that can break ghost buttons. If you want to use icons inside your buttons, we recommend you use a theme with built-in Font Awesome 5 icons. GhostButtons does not include Font Awesome icons.
Example:
Here is a selection of examples created with GhostButtons. Each has been set as a link to https://example.com for demonstration purposes.Stack settings
Possible style and colour variations you can change in GhostButtons include:- Alignment
- Style
- Padding
- Margin
- Transition (animation) speed
- Colour scheme
- Font size
- Line height
- Letter spacing
- Border radius
- Border width
- Minimum and maximum width
Setup
GhostButtons is remarkably easy to use and perfect for novice RapidWeaver users who may have never worked with add-on stacks previously. Follow these quick setup instructions:- Download the stack from this webpage.
- Uncompress the .zip file if your computer does not do so already.
- Drag and drop the S4S-GhostButtons.stack icon onto your RapidWeaver dock icon. Follow the onscreen prompts the installing the stack. Restart RapidWeaver.
- Open RapidWeaver. If you have not done so yet, add a new Stacks page type to your website.
- Open the Stacks Library and search for 'GhostButtons' in the search box.
- Drag and drop a copy of GhostButtons into your webpage (orange and white icon).
- With the stack selected in Edit Mode, you can customise any of its settings in the Stacks side panel. Mouseover settings to read an informational tooltip about what each one does.
- Preview your webpage to see the result. Export or publish the website in the normal way, when done.
Number inputs like padding and font size allow you to specify your own units of measurement. Some people prefer working in pixels, whereas others use percent, viewport units or rems to match an existing theme framework being used. Use whatever units of measurement you want! Just remember to include your preferred units or measurement or valid keywords like 'inherit'.
Custom CSS
Additional styling can be applied using custom CSS. Use the class selector nameghost_buttons_outer to target the outer container. The link inside the container is a regular HTML link, so you can use the a selector. For example, to apply a text shadow, you could do:.ghost_buttons_outer a {
text-shadow: 1px 1px 1px rgba(255, 0, 0, 0.6);
}Your also have the ability to add custom classes of your own to the button link, using custom attributes in the link dialog window.
