Link Design

Now that links in text are no loner used a link bar is important in responsive website design for placing below text which requires links to related content.
The design of the actual links goes a long way to making the page design more uniqur and memorable.
The link styles shown below will add a touch of pep and individuality to any responsive web page design. Each style has a distinctive hover animation when viewed on computers.
Design features …

• Solid color or two color gradient wrapper background
• Animated hover transitions for a smooth professional appearance
• Horizontal and vertical spacing controls
• Links to internal or external pages
• Minimum width setting & border radius controls

Chevron

The Chevron links show a single chevron iocn on page load and a double chevron on hover. The chevron icon is created using CSS for maximum efficiency.

Shutter

The shutter links have a "camera shutter" style background animation on hover. The background animation has a transition time added for a smooth effect.

Disc

The disc links have a two coumn grid layout with the text in one column and the rotating disc in the other.

Gradient

The gradient links have a two color gradient background with a solid background color sliding in and over on hover.

Social Links

The social links are designed for ease of use, maximum efficiency and icon quality. All the popular social media links are included in the widget with checkboxes to tirn them on.
The links can have a common background or individual background colors and have a hover span with the destination name.
Custom Links
The optional first link can have a custom icon and, in this case, it is a link to the home page.
The last link after the social media items can also be configured with a different icon - in this case an info page link.
Phone & Email
There are two more optional links for a phone function showing the phone number in the span on computers and a spam protected email link.