You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page.
Turn on more accessible mode
Turn off more accessible mode
Skip Ribbon Commands
Skip to main content
Turn off Animations
Turn on Animations
Sign In
Home
Demos
Intranet Collection1
Together
Lets Move
Focus
Play
Inspired
Sport
Bold
News
Intranet Collection2
Intranet Layout 1
Intranet Layout 2
Intranet Layout 3
Intranet Layout 4
Intranet Layout 5
Intranet Layout 6
Intranet Layout 7
Intranet Layout 8
Intranet Collection3
Intranet Layout 9
Intranet Layout 10
Intranet Layout 11
Intranet Layout 12
Intranet Layout 13
Custom Collection
Custom Layout 1
Custom Layout 2
Custom Layout 3
Custom Layout 4
Footer
Footer Templates
Footer Guide
Microsoft Teams Kit
Social
Knowledge Base
Team Stuff
Announcements
Teams Basic
Teams Advanced
Company Policy
Remote Work
High School
Primary School
School Contacts
Accessibility
Footer
Accessibility Statement
Themes
Theme 1
Theme 2
Theme 3
Theme 4
Theme 5
Theme 6
Branded Sites
Branded Site 1
Branded Site 2
Branded Site 3
Branded Site 4
Branded Site 5
Branded Site 6
Branded Site 7
Branded Site 8
Branded Site 9
Use Cases
Social
Social 1
Social 2
Social 3
Airlines
Airlines 1
Airlines 2
Airlines 3
Education
Education 1
Education 2
Education 3
Education 4
Education 5
Education 6
Education 7
Real Estate
Real Estate 1
Real Estate 2
Real Estate 3
Real Estate 4
Technology
Technology 1
Technology 2
Technology 3
Technology 4
Travel
Travel 1
Travel 2
Travel 3
Travel 4
Retail
Retail 1
Retail 2
Retail 3
Retail 4
Legal
Legal 1
Legal 2
Legal 3
Legal 4
Healthcare
Healthcare 1
Healthcare 2
Healthcare 3
Healthcare 4
Healthcare 5
Sport
Sport 1
Sport 2
Sport 3
Basics
Abbreviation
Button
Divider
Link
Popover
Table
Tooltip
Layout
Accordion
Alert
Info
Note
Panel
Row
Section
Tabs
Toggle
Well
Lists
Date List
File List
Icon List
Image List
Simple List
Media
Background
Before and After
Frame
Image
Image Caption
Image Carousel
Image Titles
Slideshow
Textshow
Vimeo Video
YouTube Video
Misc
Animate
Code
Countdown
Counter Boxes
Events
Icon
Map
Tickers
Tiles
TOC Content
TOC Navigation
Typography
Blockquote
Dropcap
Emphasis
Label
Lead
List
Small
Text
Social
Facebook
Instagram
LinkedIn
Twitter
Yammer
Office 365
PowerApps
Power BI
Teams
Button ShortPoint Demo
It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.
Home
Recent
Currently selected
Employee List
ShortPointOnlineAssets
Employees2
News
Site Contents
Page Content
[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156f66cc08537d3c399d484_button.svg" title="Button" description="Facilitate%20user%20interaction%20on%20your%20page%20with%20the%20Button%20Design%20Element.%20With%20buttons%2C%20you%20can%20effectively%20elicit%20action%20from%20your%20users%20to%20direct%20them%20to%20other%20pages%2C%20forms%2C%20or%20content%20on%20your%20site." /]
Button Options Demos
Different Colors
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Default" /]
[button large title="Primary" color="primary" /]
[button large title="Success" color="success" /]
[button large title="Danger" color="danger" /]
[button large title="Info" color="info" /]
[button large title="Warning" color="warning" /]
[/panel]
Custom Colors
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large text-color="%23dcb3e2" title="Button" color="%23a46fb4" /]
[button large text-color="%23219490" title="Button" color="%231fd9d2" /]
[button large text-color="%23b8b8b8" title="Button" color="%234c4c4c" /]
[button large text-color="%23c8df5c" title="Button" color="%238fab0d" /]
[button large text-color="%23f6a376" title="Button" color="%23bb6c41" /]
[button large text-color="%2336436c" title="Button" color="%237089d6" /]
[/panel]
Text Colors
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Default" color="white" /]
[button large text-color="primary" title="Primary" /]
[button large text-color="success" title="Success" /]
[button large text-color="danger" title="Danger" /]
[button large text-color="info" title="Info" /]
[button large text-color="warning" title="Warning" /]
[/panel]
Size Control
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Large%20Size" color="primary" /]
[button title="Default%20Size" color="primary" /]
[button small title="Small%20Size" color="primary" /]
[button xsmall title="XS%20Small%20Size" color="primary" /]
[/panel]
Linking Options
[divider style="double-dotted" /]
Lightbox
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button lightbox large title="Image" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" color="border-dark" icon="picture-o" /]
[button lightbox large title="YouTube%20Video" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" color="red" icon="ion-social-youtube" /]
[button dialog large title="Vimeo%20Video" link="https%3A%2F%2Fvimeo.com%2F200671449" color="info" icon="ion-social-vimeo" /]
[button lightbox large title="Google%20Map" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" color="primary-dark" icon="map-marker" /]
[/panel]
New Window
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button new-window large title="Image" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" color="border-dark" icon="picture-o" /]
[button new-window large title="YouTube%20Video" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" color="red" icon="ion-social-youtube" /]
[button new-window large title="Vimeo%20Video" link="https%3A%2F%2Fvimeo.com%2F200671449" color="info" icon="ion-social-vimeo" /]
[button new-window large title="Google%20Map" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" color="primary-dark" icon="map-marker" /]
[/panel]
Button Wide
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Button" color="primary" wide="true" /]
[/panel]
Button Disabled
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Disabled%20Button" color="primary" disabled="true" /]
[/panel]
Button With Icon
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large title="Button%20With%20Icon%201" color="primary" icon="anchor" /]
[button large title="Button%20With%20Icon%202" color="primary" icon="cog" /]
[button large title="Button%20With%20Icon%203" color="primary" icon="heart" /]
[button large title="Button%20With%20Icon%204" color="primary" icon="bell" /]
[button large title="Button%20With%20Icon%205" color="primary" icon="ion-android-person" /]
[/panel]
Button With Subtitle
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[button large sub-title="With%20Subtitle" title="Large%20Button" color="primary" /]
[/panel]
[sp-demo-doc]
Title
– name of the button
Subtitle
– the button subtitle. this text will appear smaller than button text and below it
Link
– button link where you will redirect
Linking options
– there you can choose how to open your link:
Default – by default link will be opened in the same window
LightBox – your link will be opened in the lightbox
New window – your link will be opened in the new tab
Dialog – your link will be opened in the dialog window
Color
– defined colors for buttons like: primary, info, success, warning, danger. All colors available at
ShortPoint Colors
page
Text Color
– pre-defined colors for buttons text. All colors available at
ShortPoint Colors
page
Icon
– display icon inside the button. All icons available at
ShortPoint Icons
page
Size
– you can choose one of the following sizes:
Large
Small
Xsmall
Wide
– button width will fit the whole area width
Disabled
– button will be disabled
[/sp-demo-doc]