Jump to content

Add Styling and Animation to Main Banner Links

Recommended Posts

Site URL: https://www.adam-underwood.com/

My homepage banner has three links that go to different parts of my portfolio. I want to remove the text-decoration for all, and instead when the link is hovered i'd like the underline to animate in. Right now, there's no positive interaction on the links so i want to add an animated underline when hovered to reinforce the fact that they are clickable. 

 

password is: guestaccess

Link to comment
  • Replies 6
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

On 5/5/2021 at 12:40 AM, ohlookitsadam said:

Site URL: https://www.adam-underwood.com/

My homepage banner has three links that go to different parts of my portfolio. I want to remove the text-decoration for all, and instead when the link is hovered i'd like the underline to animate in. Right now, there's no positive interaction on the links so i want to add an animated underline when hovered to reinforce the fact that they are clickable. 

 

password is: guestaccess

Add to Design > Custom CSS

div#page-section-6085cd69fc04bf5c49a47fd7 a {
    text-decoration: none;
    position: relative;
    transition: all 0.3s;
}
div#page-section-6085cd69fc04bf5c49a47fd7 a:after {
    content: "";
    height: 1px;
    width: 0;
    background-color: white;
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
div#page-section-6085cd69fc04bf5c49a47fd7 a:hover:after {
    width: 100%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
57 minutes ago, tuanphan said:

Add to Design > Custom CSS


div#page-section-6085cd69fc04bf5c49a47fd7 a {
    text-decoration: none;
    position: relative;
    transition: all 0.3s;
}
div#page-section-6085cd69fc04bf5c49a47fd7 a:after {
    content: "";
    height: 1px;
    width: 0;
    background-color: white;
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
div#page-section-6085cd69fc04bf5c49a47fd7 a:hover:after {
    width: 100%;
}

 

This was such a huge help, thank you so much! This worked perfectly.

Link to comment
  • 2 weeks later...
19 hours ago, ohlookitsadam said:

Thanks! That would be amazing. Im not quite sure how to fix those issues.

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6085e14b60c57f798358148c>.row>.span-2 {
    width: 30%;
}
div#page-section-6085e14b60c57f798358148c>.row>.span-9 {
    width: 50%;
}
div#page-section-6085e14b60c57f798358148c>.row>.span-1 {
    width: 20%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 2/3/2022 at 11:58 PM, SpaceSquare said:

@tuanphan this is really good but wondering if there was code we could use to animate with an arrow to the left of the text on hover rather than the underline?

Hi. Possible. Your site is 7.1 or another template? https://www.adam-underwood.com/

If another, please share link to your site, we can tweak the code easier

If 7.1. let me know. We will check & give new code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.