Add Styling and Animation to Main Banner Links

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

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%;
}

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.

On 5/9/2021 at 5:48 AM, tuanphan said:

Do you want to solve these?

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

1. (Tablet-Footer) Increase text/button width?

2. (Tablet-Footer) Increase logo size?

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

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%;
}
}

@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?

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