Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add Styling and Animation to Main Banner Links


Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

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

 

Link to post
  • 0
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 post
  • 0
On 5/6/2021 at 9:53 PM, ohlookitsadam said:

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

Do you want to solve these?

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

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

www.adam-underwood.com-01-min.png

2. (Tablet-Footer) Increase logo size?

www.adam-underwood.com-02-min.png

Link to post
  • 0
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%;
}
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...