The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below.

Adding overflow: hidden to the toggle-button class allows me to see the full border, but the "shadow" does not extend beyond the border. Using an outline kind of works, but it is removed on click, focus, and other events. Ideally, I would like to stick with using a border if possible.

Edit: I have found that removing z-index: 1 solved the issue when the button is not nested inside a div with a background color.

.background-color {
    background-color: red;
    height: 250px;
    width: 250px;
}

.toggle-button {
    padding: 10px 25px;
    background-color: transparent;
    border: 3px solid #000000;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    transition: all .2s ease;
}
    .toggle-button:hover {
        left: 4px;
        top: 4px;
    }

    .toggle-button:after {
        background-color: #eeeeee;      
        width: 100%;
        height: 100%;
        position: absolute;
        left: 6px;
        top: 6px;
        z-index: -1;
        content: "";
        box-sizing: content-box;
        transition: all .2s ease;
    }

    .toggle-button:hover:after {
        left:0px;
        top: 0px;
    }
<div class="background-color">
    <button class="toggle-button">Toggle me</button>
</div>

htmlcss

Answer №1

To start, it is essential to set a universal * {box-sizing: border-box;} rule in CSS and incorporate the 

CSS Pseudo Elements ::before & ::after
for creating animation effects and resolving z-index and overlapping issues.

The box-sizing property dictates how the width and height of an element are calculated: whether they should include the padding and borders, or not.

*,*::before,*::after{
    box-sizing: border-box;
}
.background-color {
    background-color: red;
    height: 250px;
    width: 250px;
    position: relative;
}
.toggle-button {
    padding: 14px 30px;
    border: 3px solid transparent;
    background-color: transparent;
    position: relative;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 1;
    transition: all .2s ease;
    left: 3px;
    top: 3px;
    z-index: 0;
    cursor: pointer;
}
.toggle-button:hover {
    left: 6px;
    top: 6px;
}
.toggle-button::before {
    content: "";
    background-color: transparent;      
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    border: 3px solid #000000;
}
.toggle-button::after {
    background-color: #eeeeee;      
    width: 100%;
    height: 100%;
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: -1;
    content: "";
    transition: all .2s ease;
}
.toggle-button:hover:after {
    left:0px;
    top: 0px;
}
<div class="background-color">
    <button class="toggle-button">Toggle me</button>
</div>

Answer №2

div {
    background: blue;
    position: absolute;
    z-index: 5;
    padding: 30px;
}
.toggle-button {
    padding: 15px 30px;
    background-color: transparent;
    border: 3px solid #ffffff;
    position: relative;
    top: 5;
    left: 5;
    transition: all .3s ease;
}
    .toggle-button:hover {
        left: 6px;
        top: 6px;
    }

    .toggle-button:after {
        background-color: #dddddd;      
        width: 100%;
        height: 100%;
        position: absolute;
        left: 7px;
        top: 7px;
        z-index: -2;
        content: "";
        box-sizing: content-box;
        transition: all .3s ease;
    }

    .toggle-button:hover:after {
        left:1px;
        top: 1px;
    }
<div>
<button class="toggle-button">Click to Toggle</button>
</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

Transferring time for streaming MP3 files from server to HTML5 audio

Currently, my node.js server is set up to convert and stream mp3 files in real-time. I have integrated an HTML5 audio tag to play this stream, but I am encountering a problem - the audio element is unable to determine the duration of the mp3 until it has c ...

htmlhttpaudiostream

Errors that occur when parsing templates in Angular 2

I'm encountering a template parse error with my Angular 2 component using the following template: <div *ngIf="chapter == 1"> <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4 ...

javascripthtmlangularangular2-template

Maintain the collapsing of links in the navbar with the help of Bootstrap

Currently, I am designing a responsive navigation bar utilizing Bootstrap. The current layout displays as follows: in expanded view, and: in collapsed view. While the design appears satisfactory in normal view, I am looking to maintain the "Sign Up" lin ...

csstwitter-bootstrapnavbar

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: To create the table, I am using two arrays named milestone and milestoneDate. ...

javascripthtmlcsshtml-tabletranspose

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Make sure to choose the radio button that corresponds to the desired title value, as this will be automatically added to the input text

Visit this link for a live example. <div class='liveExample'> <input type="radio" name="gender" value="Mr." checked>Mr. <input type="radio" name="gender" value="Mrs.">Mrs. <p>First name: <input data-bind=&ap ...

javascripthtmlknockout.js

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

javascriptcsslightboxtransition

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

How to effectively manage multiple stylesheet links in React Native Expo development

Hello, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS/JS along with the basics of React. As a beginner developer, my current project involves creating a Study planner app for myself using React Native ...

javascriptcssreactjsreact-nativeexpo

How can I combine an onkeypress and onclick event listener in one method?

I have two inquiries, somewhat intertwined. 1) Is it feasible to merge the 2 functions below into a more efficient function, or do I need to create a function and then call it in both event listeners? input.addEventListener("keyup", () => { if (eve ...

javascripthtmladdeventlistener

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

I'm struggling to pass the value from a dropdown list in the parent ASPX form to a textbox in the child ASPX form. Parent JavaScript: The first script is used to open the popup window <script type="text/javascript"> var popup; ...

c#javascripthtmlasp.net

I am having difficulty with my ajax code and I am unsure of how to resolve it

Here is the code snippet. I am encountering an issue where pressing the button does not trigger any action, while I simply want to ensure that the AJAX functionality is working properly. The expected behavior is for an alert message to be displayed when th ...

jqueryhtmlajax

Obtaining user input from a content editable div in a React component

Get content from editable div const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Element Properties <div name="textbox" ref ={contentref} cla ...

htmlreactjscontenteditablereact-dom

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

Using multiple conditions in SetEnvIf

I am trying to implement the SetEnvIf directive in my .htaccess file for handling multiple conditions and redirecting to a specific URL. The code I have written is as follows: SetEnvIf Remote_Host "^" press_flag=0 SetEnvIf Request_URI '/press/$&apos ...

htmlapache.htaccesssetenv

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing

Creating fixed values in HTML

I need to maintain consistency in the headings of multiple tables spread across 3 HTML pages. The heading structure is as follows: <thead> <tr> <th>MyHeading</th> </tr> </thead> My goal is to store the string MyHeadin ...

javascripthtmlconstants

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Currently, my goal is to create a functional copy button through the use of JavaScript

I've been attempting to create a basic copy button using JavaScript, but I keep encountering an error. TypeError: null is not an object (evaluating 'myInp.select') Whenever I click the copy button, My code looks like this: <!DOCTYPE htm ...

javascripthtml

Search for "conditions" in a basic HTML DOM parser

I encountered an issue when trying to parse information from a website using simple HTML DOM parser. My code looks something like this: <li> <p class="x"></p><p>..</p> <p>..</p> <p>..</p> <p class ...

phphtmlparsingdom