HTML CSS Invisible Button

you must use the following properties for a button element to make it transparent.

Transparent Button With No Text

button {

    background: transparent;
    border: none !important;
    font-size:0;
}

Transparent Button With Visible Text

button {

    background: transparent;
    border: none !important;
}

and use absolute position to position the element.

For Example

you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.

here is a working JSFiddle

here is an updated JSFiddle that displays only text from the button.

HTML anchor element has an 'invisible' button

First of all It is illegal in HTML5 to nest Button tag inside a tag.

The reason this issue is happening is you are giving left and transform css to button but a tag is still at it's original place.

    @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);

    button, .abutton {
        color: #d4af37;
        padding: 5px 25px;
        border: 2px solid #d4af37;
        position: relative;
        margin: auto;
        z-index: 1;
        overflow: hidden;
        transition: 0.3s;
        text-decoration: none;
    }

    button:after, .abutton:after {
        content: '';
        background-color: #252526;
        position: absolute;
        z-index: -2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    button:before, .abutton:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: #d4af37;
        transition: 0.3s;
        z-index: -1;
    }
    button:hover, .abutton:hover {
        cursor: pointer;
        color: #252526;
    }
    button:hover:before, .abutton:hover:before {
        width: 100%;
    }

    button:focus, .abutton:focus {
        outline: none;
    }

    .contact {
        font-size: 20px;
        top: 0.8em;
        left: 41.5%;
        transform: translateY(20px);
        transition: transform 1s, opacity 1s;
        transition-delay: 0.7s;
    }

    .git {
        color: white;
        position: relative;
        left: 13%;
        transform: translateY(0);
        transition: transform 0.5s;
        padding-bottom: 5%;
    }

    .git:hover {
        cursor: pointer;
        transform: translateY(-2.5px);
        transition: transform 0.5s;
    } 

    .linked {
        color: white;
        position: relative;
        left: 91.5%;
        transform: translateY(0);
        transition: transform 0.5s;
        padding-bottom: 5%;
    }

    .linked:hover {
        cursor: pointer;
        transform: translateY(-2.5px);
        transition: transform 0.5s;
    }

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <body>
    <br><br><br><br><br>
    <a href=""><button type="button" id="contactbutton" class="contact animated">Let's Talk</button></a>

 <a href="" type="button" id="contactbutton" class="abutton contact animated">Let's Talk</a>

    <div>
            <div class="row" id="link-git">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="" target="_blank"><i class="fa fa-linkedin linked" style="font-size: 35px;"></i></a>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="" target="_blank"><i class="fa fa-github git" style="font-size: 35px;"></i></a>
            </div>
            </div>
        </div>
        
        
    </body>

How to make a transparent HTML button?

To get rid of the outline when clicking, add outline:none

JSFiddle example

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

<button>button</button>

making the button invisible , only to show when hovering on div or has text inside the input

You could start from :

.input + button {  display:none;}.input:hover + button ,.input:valid + button ,.input:focus + button {  display:initial;}

<div class-name="search">  <input class="input" required />  <button class="searchbutton"> search </button></div>

How would i make an invisible, clickable and accessible button that can be accessed through tab and enter/space keys?

Add style="font-size:0px;" to the tag. This sets the font size to 0 pixels, rendering the link invisible but still usable via Tab and Enter key.

HTML CSS Invisible Button