April 15, 2015 Customize the Appearance of the Share Link
We receive a number of requests from users every day asking for help customizing the Share link on their ShortStack apps. The process is much like the Links Widget, but there are a few differences to keep in mind.
border: solid 1px #000000; /* border color, size, and line style */
background:#dd0000; /* background color of the Share link */
font-family: arial, sans-serif; /* font-family determines the web-safe font used for the link name */
color:#ffffff; /* color of the text in the Share link */
font-size: 14px; /* size of the text in the Share link */
border-radius: 3px; /* creates rounded corners, for a more button-like look. The larger the number, the more rounded the corners. If you don’t want rounded corners, change the border-radius to 0px */
padding:5px; /* amount of space between the text and the border of the button */
You can even change the color of the button when you hover over the Share link, here’s the CSS:
background:#000000; /* background color of the Share link when you hover over it */
You can change the Hex Values, pixel dimensions, border styles, and the font-family to suit your tab. As always, here are a few great references to help you customize:
Hex Value Guide: http://www.w3schools.com/cssref/css_colorsfull.asp
Guide to web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp.
Want more CSS Tips? Sign-up for our monthly ShortStack Tricks and CSS Tips email, just click here.