When incorporating bordered links, the border of the second link is visible two additional times on its own

https://i.sstatic.net/iRF8l.png

My issue is with creating two bordered links, but for some reason, there are extra borders showing up that I did not intend to include. The problem seems to be related to the bookings link, although I have checked the code and confirmed that the link was only input once.

EDIT: To clarify my explanation, I have added another picture highlighting the rectangles causing the problem.

https://i.sstatic.net/sBgaX.png

I suspect that the issue lies within the divs, as all my attempted solutions thus far have failed.

HTML:

        <div class="buttons">
        <div class="button1">
            <a href="explore.html">EXPLORE</a>
        </div>
        <div class="button2">
            <a href="booking.html">BOOKINGS</a>
        </div>
        </div>

CSS:

.button1 {
padding: 0 0 29px 50px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 0 29px 0px;
display: inline-block;
float:left;}

.button2 {
padding: 0 0 29px 0px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 0 29px 0px;
display: inline-block;}
.buttons a {
background-color: ffaaaa;
color: #832430;
border: 2px solid #832430;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;}
.buttons a:hover{
background-color: #832430;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline;}
htmlcsshyperlinknavigation

Answer №1

Here is the corrected code for you.

  • Instead of repeating yourself, use a class if you have the same properties for different elements.

  • The fix involved adding a # in the background property.

.btn {
  padding: 0 0 29px 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 0 29px 0;
  display: inline-block;
}

.buttons a {
  background-color: #faa;
  color: #832430;
  border: 2px solid #832430;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display:block
}

.buttons a:hover {
  background-color: #832430;
  color: white;
}
<div class="buttons">
  <div class="button1 btn">
    <a href="explore.html">EXPLORE</a>
  </div>
  <div class="button2 btn">
    <a href="booking.html">BOOKINGS</a>
  </div>
</div>

Answer №2

I currently do not have all the specifics on what you want to achieve, so I will need to come back with an update later. Option 1: To create a double border quickly, use both the border and box-shadow properties. Option 2: A simpler approach is to utilize the ::after selector, take some time to research it, and see how it can make your life easier!

.buttons a {
    background-color: ffaaaa;
    color: #832430;
    border: 2px solid #832430;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0px 0px 0px 2px silver; /* single line for 2nd border */
    margin: 0 10px;
}

.buttons a:hover{
    background-color: #832430;
    color: white;
    padding: 14px 25px;
}
<div class="buttons">
  <a class="button" href="explore.html">EXPLORE</a>
  <a class="button" href="booking.html">BOOKINGS</a>
</div>

::after selector method

.buttons .button-wrap{
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 10px;
}
.buttons a {
    background-color: ffaaaa;
    color: #832430;
    border: 2px solid #832430;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.buttons a:hover{
    background-color: #832430;
    color: white;
}

.buttons a::after{
  position: absolute;
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  top: -6px;
  left: -6px;
  margin: 4px;
  border: 2px solid silver;
}
<div class="buttons">
  <div class="button-wrap">
      <a class="button" href="explore.html">EXPLORE</a>
  </div>
  <div class="button-wrap">
      <a class="button" href="booking.html">BOOKINGS</a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I preserve ASP.NET ViewState within dynamically generated HTML controls?

Is it feasible to maintain the ViewState of custom controls with a few <input type='checkbox' /> controls rendered within the Render method? An alternative approach involves using ASP.NET server CheckBox controls, adding them within the On ...

asp.nethtmlrender

Two columns of equal height featuring three card UI elements

I'm currently working with Bootstrap 4 and I have a grid set up with 1 row containing 2 columns and 3 card elements. However, I am struggling to adjust the height of the blue card element to align with the yellow card element. I want both cards to ha ...

htmlcssbootstrap-4flexbox

the values being shown in a read-only text field

Here is a table structure displaying text inputs, total marks, and marks remaining: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text input) 6 6 (blank di ...

phpjqueryhtml

Tips for maintaining interactivity after a page refresh

$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...

javascripthtmljqueryjquery-uijquery-plugins

Extracting data from a React HTML table using Beautiful Soup

Struggling to extract data from a table on an HTML page. Here is the webpage: HTML PIC I am attempting to retrieve information from the table rows using the following code: response = requests.get('https://partner.market.yandex.ru/supplier/23309133/ ...

pythonhtmlpython-3.xbeautifulsoup

Getting an HTML element from a different HTML document and showcasing it in the current document: A Complete Guide

Currently, I am in the process of developing a website where users can submit requests and receive responses from others. To streamline this process, I have designed an app-like form to gather necessary information. This form consists of 3 pages that need ...

javascripthtmldom

Is there a way to temporarily turn off the hover effect on a div element?

I'm in the process of designing a webpage and I've implemented a popup functionality that opens when I hover over a specific div, and closes when I move away from it. However, I now want to add a feature where clicking on the div keeps the popup ...

javascripthtmlcss

Display title of link in mobile navigation menu

I would like to incorporate icons in my navbar instead of text, with the option for the title to be displayed on hover. The "title" text currently displays correctly on both mobile and desktop versions. However, on mobile display, I want the title text t ...

htmlcssbootstrap-4

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

csstwitter-bootstrapnavbar

Launching Links in Browser Using Cordova in Android Platform

I am facing an issue with the inAppBrowser on Android. Despite setting it up correctly, using _blank or _system still results in the webpage loading within the app instead of opening in an external browser. Here is the relevant code: <a href="#" rel=" ...

javascriptandroidhtmlcordova

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Tips for mastering web design techniques

As a budding Web Designer, I am eager to absorb the most efficient techniques utilized in the world of web design. Can anyone recommend some tutorials for mastering the creation of innovative websites using Photoshop, CSS, HTML, and more? ...

jqueryhtmlcssphotoshop

Is there a way to retrieve HTML generated by JavaScript?

The title may not be very clear, so let me give an example to explain: Imagine there are two websites, site A and site B, both related to finance. I am interested in comparing the value of Italian pizza on one specific page from each site to determine wh ...

javascripthtml

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

javascriptjqueryhtmlcss

Is there a way to determine whether there is an item located at a specific point on a grid?

Imagine a scenario where we have a grid with 5 columns and 3 rows as an example. However, the number of elements and their positions are unknown. https://i.sstatic.net/Ay0i3.png Consider that the only element on the grid is the red area. I am in need of ...

javascriptcssgridcss-grid

When the "send" button is clicked on a particular contact form, it is actually redirecting to a different form instead of sending the

My one-page website originally had a contact form at the end, But then I decided to get creative and copied that form, made some changes, and added it to a pop-up window that appears when clicking on three different buttons in the middle of the page. How ...

htmlpopup

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

javascripthtmlcssimagehover

When users visit my contact HTML page, they are redirected to the contact PHP page, but unfortunately, the email is

I am currently facing an issue with my contact form. After filling out the form and hitting the "send" button, it redirects to the contact.php page but fails to send an email or work as intended. Can someone please assist me and identify what's causin ...

javascriptphpjqueryhtmlcss

changing html numbered list to xml format

Looking to convert HTML ordered lists with different types into XML markup? <ol type=a> <li>This is list item a</li> <li>this is list item b</li> </ol> <ol type=i> <li>This is list item 1</ ...

htmlxmlxslt

Change all hyphens in PHP to spaces

I have a code snippet that automatically sets the page title as the file name to save time when creating new pages. However, I want to replace spaces in the URL with hyphens for a cleaner look. The issue is that this also changes the page title to include ...

phphtml