Links & Buttons

Links are fundamental to the functionality, usability, and effectiveness of a website. They facilitate navigation, allowing users to move easily through the site and find related content, enhancing the overall user experience. From an SEO perspective, both internal and external links improve search engine rankings by helping search engines understand the site's structure and increasing its credibility.

Links also connect related content, keeping users engaged and reducing bounce rates. They can drive referral traffic from other sites and build authority by linking to reputable sources. Additionally, links add interactivity, enable users to perform actions like downloads or purchases, and direct users to updated information. Finally, they provide valuable data for tracking user behavior and informing site improvements.

In Sitefinity

Adding links and buttons to content within the different content modules like Content blocks, Lists, Blogs, Events, etc. is easy using pre-written classes and writing the HTML within the WYSIWYG Editor and within the modules in the Sitefinity system. 

The Basics

The HTML elements <a>, <a> with button classes, and <button> have different purposes and behaviors. Understanding the specific use cases and default behaviors of these elements helps in choosing the right one for your needs, ensuring both functionality and accessibility in your web applications. Here’s a detailed explanation of each and their differences:

<a> Element

The <a> (anchor) element is primarily used to create hyperlinks, when clicked will navigate the user to a different URL or location within the same document, the URL specified in the href attribute. The most common attributes are href (specifies the URL of the page the link goes to) and target (specifies where to open the linked document, e.g., in a new tab).

<a> Element Link

Default
I'm a hyperlink 
<a href="#" title="">I'm a hyperlink</a>

Link: Button Link Class

CSS Classes: btn btn-link
Link button 
<a class="btn btn-link" href="#" title="">I'm a hyperlink</a>

Link: Button Text Class

CSS Classes: btn btn-text
Link button text 
<a class="btn btn-text" href="#" title="">I'm a hyperlink</a>

<a> Element with Button Classes

The <a> element styled to look and behave like a button combines the hyperlink functionality of <a> with the appearance of a <button> . Use this option when you need the navigational capabilities of a link but want it to look like a button for better user experience. In addition to href and target, it uses CSS classes to apply button styles. 

<a> Element with Button Classes & Brand Colors

CSS Classes: btn + brand color class

Red  Gray  Gray Dark  Gray Light  White  Black  Blue  Blue Dark  Blue Light  Orange  Orange Mid  Orange Light  Green  Green Dark  Green Light  Teal  Teal Dark  Teal Light  

<a class="btn btn-red" href="#" title="">Red</a>
<a class="btn btn-gray" href="#" title="">Gray</a>
<a class="btn btn-gray-dark" href="#" title="">Gray Dark</a>
<a class="btn btn-gray-light" href="#" title="">Gray Light</a>
<a class="btn btn-white" href="#" title="">White</a>
<a class="btn btn-black" href="#" title="">Black</a>
<a class="btn btn-blue" href="#" title="">Blue</a>
<a class="btn btn-blue-dark" href="#" title="">Blue Darkt</a>
<a class="btn btn-blue-light" href="#" title="">Blue Light</a>
<a class="btn btn-orange" href="#" title="">Orange</a>
<a class="btn btn-orange-mid" href="#" title="">Orange Mid</a>
<a class="btn btn-orange-light" href="#" title="">Orange Light</a>
<a class="btn btn-green" href="#" title="">Green</a>
<a class="btn btn-green-dark" href="#" title="">Green Dark</a>
<a class="btn btn-green-light" href="#" title="">Green Light</a>
<a class="btn btn-teal" href="#" title="">Teal</a>
<a class="btn btn-teal-dark" href="#" title="">Teal Dark</a>
<a class="btn btn-teal-light" href="#" title="">Teal Light</a>

<a> Element with Button Classes & Utility Colors

CSS Classes: btn + utility color class

Default  Primary  Secondary  Info  Danger  Warning  Success  

<a class="btn btn-default" href="#" title="">Default</a>
<a class="btn btn-primary" href="#" title="">Primary</a>
<a class="btn btn-secondary" href="#" title="">Secondary</a>
<a class="btn btn-info" href="#" title="">Info</a>
<a class="btn btn-danger" href="#" title="">Danger</a>
<a class="btn btn-warning" href="#" title="">Warning</a>
<a class="btn btn-success" href="#" title="">Success</a>

<button> Element

The <button> element is used to create a clickable button that executes actions such as submitting forms or triggering JavaScript functions. It should not be used simply as a link to a different URL.

The type attribute determines its behavior. There are 3 different types:

  • type="button": A generic button that can be used with JavaScript to perform custom actions.
  • type="submit": Submits the form it is within. (Default)
  • type="reset": Resets all form fields to their initial values.

Button: Button Class

CSS Classes: btn 
<button class="btn">Button</button>

Button: Button Link Class

CSS Classes: btn btn-link 
<button class="btn btn-link">Button Link</button>

Button: Button Text Class

CSS Classes: btn btn-text 
<button class="btn btn-text">Button Text</button>

Button & Brand Colors

CSS Classes: btn + brand color class

                                    

<button class="btn btn-red">Red</button> 
<button class="btn btn-gray">Gray</button> 
<button class="btn btn-gray-dark">Gray Dark</button> 
<button class="btn btn-gray-light">Gray Light</button> 
<button class="btn btn-white">White</button> 
<button class="btn btn-black">Black</button> 
<button class="btn btn-blue">Blue</button> 
<button class="btn btn-blue-dark">Blue Dark</button> 
<button class="btn btn-blue-light">Blue Light</button> 
<button class="btn btn-orange">Orange</button> 
<button class="btn btn-orange-mid">Orange Mid</button> 
<button class="btn btn-orange-light">Orange Light</button> 
<button class="btn btn-green">Green</button> 
<button class="btn btn-green-dark">Green Dark</button> 
<button class="btn btn-green-light">Green Light</button> 
<button class="btn btn-teal">Teal</button> 
<button class="btn btn-teal-dark">Teal Dark</button> 
<button class="btn btn-teal-light">Teal Light</button> 

Button & Utility Colors

CSS Classes: btn + utility color class

                

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-default" disabled="disabled">Disabled</button>

Customizations

Sizing

CSS Classes: btn btn-lg btn-sm
Link Button Large  Link Button Small 
<a class="btn btn-large" href="#" title="">Link Button Large</a>
<a class="btn btn-small" href="#" title="">Link Button Small</a>
    
<button class="btn btn-lg">Button Large</button>
<button class="btn btn-sm">Button Small</button>

Full Width

CSS Classes: btn btn-block
Link Button Block 
<a class="btn btn-block" href="#" title="">Link Button Block</a>
<button class="btn btn-block">Button Block</button>

Sitefinity Modules

Content modules create collections of content that can be displayed on web pages and in templates. The following modules allow users to add links and buttons on the websites through the WYSIWYG editor on the widgets or content items which allow for a full HTML view of the content as well as by adding them to the More Options region on the widget in the page: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links. 

Learn how to use the WYSIWYG editor

On this page: