The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design.

.btn {
    line-height: 50px;
    height: 50px;
    text-align: center;
    width: 250px;
    cursor: pointer;
}    
.btn-three {
        color: #FFF;
        transition: all 0.5s;
        position: relative;
    }
    .btn-three::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,1);
        transition: all 0.3s;
    }
    .btn-three:hover::before {
        opacity: 0 ;
        transform: scale(0.5,0.5);
    }
    .btn-three::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.5);
        transform: scale(1.2,1.2);
    }
    .btn-three:hover::after {
        opacity: 1;
        transform: scale(1,1);
    }

Upon adjusting the background opacity of the button to black, I noticed that the text disappears when in the :before state.

Could it be that the text and the button are on the same 'layer', causing this issue?

htmlcssbuttonhover

Answer №1

To enhance the design, I recommend moving the anchor link outside the button tags and utilizing z-index to bring the text to the forefront.

Here is the CSS code:

.btn-three {
  transition: all 0.5s;
  position: relative;
  line-height: 25px;
  height: 50px;
  align-items: center;
  text-align: center;
  width: 250px;
  cursor: pointer;
}

.btn-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(16, 84, 35, 1);
    transition: all 0.3s;
}
.btn-three:hover::before {
    opacity: 0 ;
    transform: scale(0.5,0.5);
}
.btn-three::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transform: scale(1.2,1.2);
    z-index: 2;
}

.three-text {
    position: relative;
    margin-top: -10px;
    z-index: 1;
    display: block;
}

.btn-three:hover::after {
    opacity: 1;
    transform: scale(1,1);
}

.button-wrapper {
    padding-top: 3%;
    text-align: center;
    padding-bottom: 3%;
}

For the HTML part:

<div class="button-wrapper">
  <button class="btn btn-three" />
  <a class="three-text">YOUR TEXT HERE</a>
 </div>

You can check out a Codepen example here.

Answer №2

To maintain the black opacity and ensure that the text remains visible in front, you must explicitly bring the text to the forefront using z-index.

.btn-three span {
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
}

.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0,0,0,1);
  transition: all 0.3s;
}

If the span is not set above the div, the text will always appear behind it because the z-index for the ::before state is higher than that of the text.

Without a proper z-index setting, the text may disappear. Lowering the z-index to -1 will move it to the back, but the block will lose its black coloration.

.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(0,0,0,1);
  transition: all 0.3s;
}

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

A convenient method for converting horizontal columns into vertical columns on mobile screens without using <div> tags or setting a minimum width, perfect for email formatting

After experimenting with using <div> elements and applying a min-width attribute to an email, I have come to the conclusion that these methods do not yield satisfactory results. While the alignment of horizontal columns works well on desktop screens, ...

htmlresponsive-designhtml-email

Attempting to dynamically assign a nickname to a CSS element selector during runtime

I have been attempting to adjust the position of a font awesome icon within an input field dynamically. My goal was to have the style calculated at runtime, similar to how I've handled other stylesheet elements in the past. However, I am facing diffic ...

htmlcsstwitter-bootstrapfont-awesome

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...

javascriptphphtmlcsswordpress

Unable to produce scrolling animation using JavaScript

I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML ...

javascripthtmlcss

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...

javascriptphpjqueryhtmlforms

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

HTML Changing the background color of the body using HTML elements

I need assistance with an exercise that requires changing the color of a letter and background when clicking on text. I have successfully changed the text color but am struggling to change the background color. Can someone provide guidance? <html> ...

htmlnodes

Include the window.innerWidth value in the initial GET request

When dealing with a server-side rendered app that has responsive styling based on window.innerWidth, the challenge lies in how to pass the client's screen size in the initial GET request for index.html. This is crucial so that the server can prepare a ...

htmlreactjsnext.jsserver-side-rendering

The embed video is camouflaged within the bootstrap mobile display

I am currently using the latest version of bootstrap and bootswatch united theme to build and explore a standard website. The website is live at this link live site, featuring an embedded section on the right side as shown. My choice for the view engine is ...

htmlcssasp.net-mvc-4twitter-bootstrap-3bootswatch

Emphasize sections of text within a chart

Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...

javascriptjqueryhtml

The CSS scale property is not working as expected when used in a React.js application, specifically

working environment ・next.js ・reacｔ ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...

htmlcssreactjstypescriptcss-selectors

Tips for honing in on a particular card within a list of cards using React

I am currently working with React 17.0.2 and Material UI, and I have a specific requirement to focus on a particular card from a list of cards by clicking on it. (Please refer to the attached picture for clarification). I hope this explanation helps you un ...

htmlcssreactjsmaterial-uigrid

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Is there a way to activate the width styling from one class to another?

I have these 2 elements in my webpage: //1st object <span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span> //2nd object <div id="waveform"> <wave style="display: block; position: relative; user-select: none; he ...

javascriptjqueryhtml

Fixing blurry text on canvas caused by Arbor.js mouse event issues

Currently, I am utilizing arborjs in my project. The text within the canvas is created using fillText in html5. While everything functions correctly on a Retina display MacBook, the text appears blurry. To address this, I applied the following solution: v ...

javascriptjqueryhtmlcanvas

Utilizing Jquery to transform characters into visual representations

Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...

jqueryhtmlfonts

Battle of Cookies and User Preferences: Who Will Prevail?

Recently, I encountered a challenge while developing an ecommerce site. After facing numerous issues, I believe I may have finally found a solution. (For more details on the problem and my question, click here) The expected scenario: Users checkout and p ...

phphtmlcookies

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

jquerycss

Menu options displayed with the help of HTML5 tags

Currently, I am experimenting with creating an interactive HTML5 dropdown menu in my spare time. While researching on W3Schools about dropdown menus, I noticed that all of them utilize CSS classes and id's for styling. This is a snippet of the HTML c ...

htmlcssdrop-down-menunavdropdown

How can I position the close button correctly in a bootstrap popup modal?

I have a basic bootstrap popup modal. Currently, the close X button is centered within the popup window, but I would like to align it to the right corner instead. Is there a way to achieve this? <div class="modal fade" id="checkNameSurvey-modal" data ...

htmltwitter-bootstrap