I must click the web icon in order to open the link with buttons

I am having trouble with the buttons I added for my social media links. When I click on the button, it doesn't direct me to the link unless I click on the icon within the button.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177578786364636576675722392739273a7572637626">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d06180618054a4d5c4919">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


<section id="contact" class="py-5 text-center">
  <div class="container text-center ml-auto">
    <div class="row">
      <div class="col">
        <div class="info-header md-5 text-light ">
          <h1 class="text-primary pb-3">CONTACT US</h1>
          <button class="btn btn-outline-success mr-3">
              <a style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-primary mr-3">
              <a class="text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-danger mr-3">
              <a class="text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-info">
              <a target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcss

Answer №1

To fix the issue you are experiencing with having the <a> inside the <button>, simply transfer your <button> classes to the <a> and then remove the <button> tags like this:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3fde0afa8b9acfc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e859b859b86c9cedfca9a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<section id="contact" class="py-5 text-center">
  <div class="container text-center ml-auto">
    <div class="row">
      <div class="col">
        <div class="info-header md-5 text-light ">
          <h1 class="text-primary pb-3">CONTACT US</h1>
              <a class="btn btn-outline-success mr-3" style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
              <a class="btn btn-outline-primary mr-3 text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
              <a class="btn btn-outline-danger mr-3 text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
              <a class="btn btn-outline-info" target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

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

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

Imagine an array of vibrant highlights, all controlled through CSS. Is there a way to condense this extensive block of CSS code while achieving the same result? In simpler terms, is it possible to reduce the repetition in the code by using only CSS when ...

csscss-selectorscode-cleanupnon-repetitive

The Bootstrap modal causes the scrollbar to vanish upon closure

Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me. Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful ...

javascriptcsstwitter-bootstrapmeteortwitter-bootstrap-3

Ensure that HTML5 form fields are validated dynamically to make them mandatory

I have a form created using Bootstrap that contains several fields. By default, the first and second fields are required. Now, if the third field is filled out, the fourth field becomes mandatory. Similarly, if the fourth field is filled out, the third fi ...

jqueryhtmlvalidationdynamic

Adjusting the margins of jQuery mobile buttons

I seem to be stuck on a simple error that is causing me to spin my wheels. Take a look at the following jqm (version 1.3) view (in haml) #main-header{'data-role' => 'header'} #main-content{'data-role' => 'content ...

jquerycsshtmljquery-mobilejquery-mobile-button

Trouble with jQuery click event on dynamically generated elements

I have a jQuery function that iterates through each element inside a specified div (#container) and triggers a JavaScript alert whenever a span is clicked. Everything functions correctly when the spans are static. However, when I include code like this: ...

javascriptjqueryhtml

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...

htmlangulartypescriptangular-material

Centering a Font Awesome icon within its parent element

Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...

cssfont-awesome

Incorporate a section of text to flow around a floated image within a paragraph

How can I achieve the text wrapping above an image similar to the layout in the sunflower picture? I have tried using relative positioning and adjusting the top property, but it doesn't allow the text to wrap around the image. Setting the position to ...

htmlcss

Styling animations in React with inline styles

Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...

cssreactjsanimation

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

htmlcss

Issue with vertical alignment in form input text area not functioning properly

Need some help aligning inputted text with the top of a textarea on an HTML form. I've scoured forums for solutions, but no luck so far. I attempted using: textarea{ vertical-align:top;} and input["textarea"]{ vertical-align:top;} Tried adding ...

htmlcsstextareavertical-alignment

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

jquerycssgoogle-chromeoffset

Exploring menu options in a responsive web design interface

Hey, I'm having an issue with my website header. It looks great on full-width screens, but I need to address low screen resolutions using @media queries. I have a checkbox that reveals the menu items when checked. However, I'm facing an overlay p ...

htmlcss

Delete the div if it exists following another div and place it within the main div

<div class="error"> <input type="text" name="email"> <div class="error-message">Please Enter Email</div> </div> <div class="i-icon-div">Lorem Ipsum</div> I am trying to identify the div with the class of i-icon-di ...

jqueryhtml

Using a Custom Variable in PayPal Email Links

Currently, I am developing a compact integrated application for a project that does not involve using a form. In this particular project, the use of HTML is not necessary and instead, only a link can be passed to the browser. The purpose of this link is to ...

phphtmlpaypal

Does the <cite> tag go inside a link in HTML?

Whenever I include a citation in HTML using the <cite> tag, I typically place the link around the citation itself. For example: <a href="http://example.com/"><cite>Example Citation></cite></a> This method makes sense to m ...

htmlhyperlink