Styling Your Links & more...
Now we have the LinkShare HTML page laid out using either our JWS Stylesheet, or from scratch with CSS Grids, it's time to start adding your own style or company branding to make the page your own.
From adding a splash of colour across the whole page or just your link backgrounds, changing your fonts family, style or colours, making your links into info panels/cards or popovers, to adding interest with icons, buttons, border styles and drop shadows. We plan to explore how to do these and more... Starting with some of the more basic but still as impactful ideas!
A Splash of Colour
Adding colour to your web page is probably one of the quickest ways to make a dramatic change. Whether you are changing the background of the whole page or select elements within it, headings or text colours, each of these changes can be done by adding a single line of code to the element or group of elements, with the properties background-color: or color:
body {
background-color: rgb(13, 19, 55);
color: hsl(0deg 0% 100%);
}
h1, h2, h3 {
color: aliceblue;
}
a {
color: #f0f8ff;
}
/* there are different types of color values to choose from
but for the most consistent color across screens and devices
we use either rgb() or hsl() */
Though whenever you choose colours the really important thing to remember is contrast! The contrast between text or icons/images and background elements has to be both accessible for your users and also comply with any laws in your country and those you do business in, so choosing wisely and testing your choices is vitally important.
Not sure if you are a11y compliant? Check out our Accessibility on the Web sprout of wisdom, which explains key accessibility issues and links to tools for testing.
Link Styling
Even with only a basic list of <a> tags for our links, you'll be surprised how much we can do to style them up, such as:
- Button like effects
- Hover effects
- Gradient Text or backgrounds
- Underline Animation
- Adding icons
To name but a few, and even some of these have countless options and combinations that allow you to style your page uniquely. We'll be explaining how to go about creating some of these ideas, with the hopes of giving you a basis for creating your own.
Basic styling
Lets start with the most basic of changes such as font colour, font weight and the text-decoration (default visual underline that defines an link).
This dummy link shows an example of a default browser link in Chrome Edge (your browser choice may differ). A Default styled link
We can start with applying our own style choices in place of these.
a {
color: rgb(32, 99, 1); /* Change text color */
text-decoration: none; /* Remove underline */
font-weight: 700; /* Make it bold */
cursor: pointer; /* Changes cursor when hovering over */
}
Instead of removing the underline you could also change its colour and thickness, even make it dotted or wavy.
a {
text-decoration: wavy underline 3px pink;
}
a {
text-decoration: dotted underline 4px firebrick;
}
a {
text-decoration: solid underline 3px orange;
}
Border styling
The most popular look on link sharing pages has to be for links that are stylised boxes, which often also look like buttons (not to be confused with actual semantic HTML buttons).
The great thing is it doesn't take much to achieve this kind of look as all we need to apply is a border style, plus some sizing and/or padding space to the <a> so the text is readable and not crowded, which will also increase the size of the links tap area too making it easier for your users to use.
a {
border-style: solid;
border-width: 2px;
border-color: rgb(32, 99, 1);
padding: 1.3rem 2rem;
}
/* Or we can use the shorthand of border */
border: 2px solid rgb(32, 99, 1);
/* border-width border-style border-color */
We now have lots of value options to choose from with the border-style from single or double solid lines to dots and dashes, and even creating 3D effects with groove, ridge, inset and outset.
Its even possible to apply border property values to individual sides of a border using border-block-start-... (top*), border-block-end-... (bottom*), border-inline-start-... (left*), border-inline-end-... (right*)
( ... options are style, color, or width)
(*left-to-right languages only e.g. English).
a {
border-block-end-style: solid;
/* border bottom style type */
border-block-end-color: rgb(219, 90, 12);
/* border bottom color */
border-block-end-width: 4px;
/* border bottom line thickness */
}
If you want to achieve a more button like shape we can curve the corners of the border with the border-radius property which accepts px, rem or percentage values.
a {
border-radius: 25px;
}
box-shadow
You can make your shaped links pop even more by adding a box-shadow, this creates a 3D effect by giving it more depth and the impression of lifting it from the page. Shadows can help draw a users focus to an element, especially when combined with other border and/or hover effects, all helping to make your links feel more interactive and polished.
a {
padding: 1.3rem 2rem;
border-radius: 25px;
box-shadow: 0px 0px 7px 2px hsl(0deg 11.11% 89.41%);
}
/* horizontal offset, vertical offset, blur, spread, color */
Box-shadowed link code example
:hover states
Whenever we create a link it is vital that we also create a hover state on it too, so a user can see something is happening when they interact with it. This interaction could be to just take away the default text-decoration underline, or adding it back if you have already removed it for a cleaner look to your link text.
We can also change the font, background or both colours on hover. Change, add or remove a border colour. You can even mimic a button press by shrinking or removing a box-shadow effect on hover too.
a {
border: 1px solid transparent;
padding: 1.3rem 2rem;
border-radius: 25px;
box-shadow: 0px 0px 7px 2px hsl(0deg 11.11% 89.41%);
transition: box-shadow 1s ease;
}
a:hover {
border: 1px solid #fbe4e4;
border-block-end-width: 1px;
box-shadow: 0px 0px 1px 0px hsl(0deg 11.11% 89.41%);
/* On hover this will shrink the blur & spread radius of the
box-shadow and changes the thin transparent border to pink */
transition-property
When you mouse over the link above the changes on the :hover state change instantly from on to off, a bit like flicking a light switch. Which is fine but if your hover state changes are more dramatic, such as changing the background colour, then this change can look a little jarring to the user. So to help prevent this we can add transition properties to our <a> these allow us to change property values smoothly over a specified time frame
a {
transition-property: box-shadow border;
/* property or select properties we want to transition
on hover or we can select all */
transition-duration: 2s;
/* duration of transition */
transition-timing-function: ease;
/* controls the speed curve of transition e.g ease-in = slow start
or the default ease = slow start, fast middle, slow end */
transition-delay: 1s;
}
/* Or we can use the transition shorthand */
transition: all 2s ease 1s;
/* property, duration, timing-function, delay */
All of these border, box-shadow, hover and transition effects that we have applied to our <a> so far, can also be used to apply the same effects to other HTML elements such as an actual HTML <button>, a <div> or a <form>. Any element you either want to standout or to be visibly interactive with.
Adding a icon
Icons are a great visual aid that not only help to give your page more interest, but can help direct people who are scanning your page find the link they're wanting easier, especially if yours isn't their first language too.
JasmineDesign on GitHubHow to add an icon can be done in different ways but our preferred way is to add an SVG within an <img> tag, or to use a UTF-8 entity code.
Entity code
To add an entity code is probably the most straightforward way to add an icon or emoji as all we need to do is type into your HTML page the code you are wanting to use.
Their only drawback is that they can be quite limited in options depending on what you are looking for, but the w3schools.com has quite a comprehensive table of Unicode icon and emoji sets to search through.
You can recognise a HTML entity code as it will start with a & symbol, though some icons only have decimal (dec) or hexadecimal (hex) reference code options. These are perfectly okay to use also, but you will have to prefix these codes with either a &# for dec codes, or a &#x for hex codes. e.g the hex code 1F60E when prefixed with &#x will appear as this 😎 on your page.
SVG's
We love an SVG and even if you don't have the resources to create your own, there are plenty of logo and icon libraries on the web to download them from.
Which one you choose is up to you but we suggest you go with any recommendations you may have been given, or check out the company/individual you've chosen before you start downloading. When looking ourselves we found these ones which we liked, that offer a great range of free downloadable images.
- svgrepo.com
- freesvgicons.com
- svglogo.co - who also have a copy to your clipboard option too.
Please Note: We have no connection or affiliation with these companies, they are just examples of ones we liked from our own searches.
Company brand assets: If you are using a company brand asset (e.g. Github logo), then you need to be aware that some have their own brand guidelines which state how an image can be used. However if you are just using it to call out a brand on a personal site then you should be ok, BUT as we are not lawyers/solicitors please do your homework and check before using it.
Uploading to your Web Editor
Once you have chosen an image you will need to either download or copy it, then add it to your image folder within your current web editor workspace. How we do this will depend on whether you have downloaded, or copied to clipboard the SVG.
Copy to clipboard
In your web editor open your image folder. Then click on the New File icon.
An input box will now appear at the top of the folder list, where you should type in your chosen file name followed by the file type (e.g. github-icon.svg) then press either the Enter or Tab key.
A Workspace new file tab should now have opened, with the message: "An error occurred while loading the image." this is because we don't have an image saved in the file yet so you will need to click on the link below it which says Open file using VS Code's standard text/binary editor?.
Now from the clipboard paste in your SVG and save (if not already auto saved).
Image download
Open your image folder in your web editor.
Next find the new image file in your download folder or wherever you have it saved.
Select the image then drag it across to the image folder in the editor, the folder should then highlight to show you are in the correct place, then drop.
Your new image file name will automatically appear in the folder list and an image preview will open up in the editor.
Adding SVG to Link
Now the SVG is saved in your image folder, lets add it to a link?
We have already shown you how to add an <img> tag inside <a> tags when we made the "social_icons" links in the footer section. This time if you are adding a new link we want to do it the same, though we won't need to add a title="" attribute, as we won't have a link this time that is blank with no text.
If you already have the <a> in place we can add an <img> tag to it, by clicking either in front or behind your link text (placement is your choice) and type in the emmet command img then add the width and height attributes.
After filling in the relevant details you should have a link that look similar to this:
<a href="https://github.com/jasminedesign"><img src="/img/jws-github.svg" width="31" height="30" alt="Github icon"> JasmineDesign on GitHub</a>
If we now view this link, what you see will depend on whether you are following along using the JWS stylesheet or creating from scratch with CSS Grid. Also the way we fix them will be different too.
JWS stylesheet
Those using the JWS stylesheet will find your image and link text will be inline, though not centred or nicely spaced out.
The great news is the code to fix this is quite minimal, though we will need to make a new class to add to these <a> tags so we don't cause issues with any other <a> elements across our link page or website.
.link_with_img {
display: inline-flex;
gap: 1rem;
}
CSS Grids
Those using the CSS Grids route will find your image and link text are being displayed block (one above the other), with the image inline with the beginning of the text.
To fix this we will need to change the display type of the Sharelink <a> tags we want to add images to, by adding a new class so we don't cause issues with any other <a> elements across our link page or website.
.link_with_img {
display: grid;
grid-auto-flow: column;
gap: 1rem;
}
Feel free to name your class whatever you want, though there are a few things you should keep in mind when creating them:
You can use letters, numbers, hyphens (-), and underscores (_)
Avoid using special characters and reserved symbols ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
Avoid starting class names with numbers, always begin a name with a letter, underscore (_), or hyphen (-).
Always remember to add a full stop/period in front of the class when selecting it in your stylesheet.
More coming soon...
We will be adding more of the pattern ideas we have for the ShareLink soon, but we hope what we have shown you so far, will help give you enough ideas to start creating your own page.
Page Last Edited: