In HTML, how can I have two hyperlinks next to each other?

Pick Avana 0
Viewed 35

I have checked the similar questions and solutions here and am not getting any to work. I have this HTML content:

<a class="link" href={url}>
  <span class="linkInner">View</span>
</a>

And here is the CSS content:

.link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--t-bg);
    font-size: var(--f-u2);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 150ms linear;
  }
  .linkInner {
    padding: 0.375em 1em;
    border: 2px solid rgba(255, 255, 255, 0);
    transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear;
    transform: translateY(25%);
  }

This works fine. A "View" link transitions into place.

However, when I try to add a second link, only the second link is displayed.

<a class="link" href={frontmatter.url}>
  <span class="linkInner">Go to Website</span>
</a>

I have tried separate divs wrapping in ul / li with style="display:inline-block;" without the CSS and am just not getting a solution.

css html
1 Answers

To address my comment earlier .. View the commented out parts of your CSS here and hit the "View Code Snippet" button .. You were setting your elements on top of one-another.

.link {
/*    position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF; /* Changed for viewing in snip */
    font-size: var(--f-u2);
    font-weight: 700;
/*    background: rgba(0, 0, 0, 0.25);
    opacity: 0; */
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 150ms linear;
  }
  .linkInner {
    padding: 0.375em 1em;
    border: 2px solid rgba(255, 255, 255, 0);
    transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear;
    transform: translateY(25%);
  }
<!-- added this div for view only -->
<div style="background-color:#000; width:100%; height:100%">
    <a class="link" href={url}>
       <span class="linkInner">View</span>
    </a>


    <a class="link" href={frontmatter.url}>
       <span class="linkInner">Go to Website</span>
    </a>
</div>

userdfk60
Related