How to create hover effect and bring 2 different <a href> tag?

user_11151243 0
Viewed 47

In my case, I want to achieve exactly same thing and don't know how I'm suppose to do that.

hover

normal button

.apply-button {
    position: absolute;
    margin-top: 8rem;
    border-radius: 5em;
    box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 0.275rem;
    border-image-slice: 0;
    border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}
<a role="button" class="apply-button" href="#"><p>apply</p></a>

hover css html
1 Answers

Tried to understand your question however did not get what you exactly want :

here is sample code to achieve hover effect.

.showOnHover{display : none;}
.apply-button:hover .showOnHover{
    display : inline;
}
.apply-button:hover{
   display:block;
   text-align : center;
}
.apply-button {
    display : inline-block;
    margin-top: 8rem;
    border-radius: 5em;
    box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 0.275rem;
    border-image-slice: 0;
    border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}
<p class="apply-button"><a role="button" href="#">apply</a> <span class="showOnHover"> | <a role="button" href="#">apply</a></span></p>

user_32882530
Related