A hover effect in CSS that utilizes a psuedo element to overlay the primary element

When hovering, I want to achieve an effect that looks similar to the display below:

To view my website, click here

The relevant code is shown below with the !important attributes removed:

    .cta-button-menu, .cta-button-menu::before {
        transition:all 0.3s linear;
        width: 120px;
        height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .cta-button-menu:hover {
        transform:rotateZ(-45deg);
        background: #21B6CD;
        color: white;
    }   
    .cta-button-menu::before {
        content:"Book Now";
        background-color:transparent;
        position:absolute;
        @include main-font($white, 16px, $font-bold);
      }
    .cta-button-menu:hover::before{
        transform: rotateZ(90deg);
        background-color:#e72f54;
        border:none;
    }

I'm having trouble getting the blue button to overlap the red:before button. Can't seem to figure it out.

htmlcsswordpress

Answer №1

Make a switch in the colors for .cta-button-menu:hover, change background: #e72f54 to background-color:#21B6CD. Also, adjust the rotation angles accordingly. Hopefully, these tweaks will work on your end.

ul {
margin-top: 60px;
}
.cta-button-menu,
    .cta-button-menu::before {
      transition: all 0.3s linear !important;
      width: 120px !important;
      height: 50px !important;
      display: inline-flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    .cta-button-menu:hover {
      transform: rotateZ(45deg) !important;
      background: #e72f54 !important;
      color: white !important;

    }

    .cta-button-menu::before {
      content: "Book Now" !important;
      background-color: transparent !important;
      position: absolute !important;
      @include main-font($white, 16px !important, $font-bold !important);
    }

    .cta-button-menu:hover::before {
      transform: rotateZ(-90deg) !important;
      background-color: #21B6CD !important;
      border: none !important;

    }
<ul>
<li class="cta-button-menu"><a class="mega-menu-link" tabindex="0">Book Now</a></li>
</ul>

Answer №2

To achieve this effect, you can utilize the power of CSS properties like transform and transform-style.

.cta-button-menu {
  transform-style: preserve-3d;
}

.cta-button-menu:hover::before {
  transform: rotateZ(90deg) translateZ(-1px);
}

Check out this CodePen example for a live demonstration.

Please note that this may not be supported in Internet Explorer 11.

Answer №3

Hey there @SinsiaM, after pondering a bit on your suggestion, I made some tweaks to the code:

    .cta-button-menu:hover {
        transform:rotateY(90deg) !important;
        background-color:#ff5733 !important;
        color: black !important;
    }   
    .cta-button-menu:hover::before{
        transform: rotateX(180deg) !important;
        background: #17E9C1 !important;
        z-index: 2;
        border:none !important;
    }

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

What is the best way to share specific links on LinkedIn articles?

When the LinkedIn button is clicked, the entire link does not get passed when the image is clicked. However, the Facebook link works perfectly fine. The LinkedIn button used to work before, has anything changed since then? <div align="center"> < ...

javascripthtmlreactjslinkedin-api

Stylish Material Design Icons

Our website utilizes CSS classes to display icons across various pages. .alert { /* used for "alert" type messages */ background: url(images/alerts.png) no-repeat left top; padding: 5px 0 15px 35px; margin: 0; } Use: <p id="ctl00_ctl00_ContentMessagePa ...

cssmaterial-ui

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

javascripthtmlangularjs

JavaScript hovering drop-down feature

Hi there, I'm just starting out with javascript and could use some help with a simple script. I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hove ...

javascriptjquerycss

Adding padding-top to the h1 element within a vertically aligned div

I have a div with a set height and the content inside adjusts vertically according to the height. To align it vertically, I added the property display-table; to the parent div and display: table-cell; vertical-align: middle; to the child div. The alignment ...

css

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

htmlcss

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5

Unable to load module/controller file from Angular 1 into view/html

var app = angular.module("appModule",[]); app.controller("viewController",function($scope){ $scope.greeting = "Welcome to the future"; }); <html> <head> <script src="Scripts/script.js"></script> <script ...

javascriptjqueryhtmlangularjs

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

htmlcssradial-gradients

Troubleshooting problems with jqplot pie charts

Currently, I am utilizing jqplot to create pie charts. Despite following the example code provided in the jqplot documentation, I am encountering errors such as "e.jqplot is undefined." Below is a snippet of my code: <script src="jquery-2.0.3.js"> ...

jqueryhtmljqplot

Issues encountered when dealing with floating elements and margins

Having some difficulties with aligning elements on my website. As someone who is not highly skilled in coding, I am struggling to define the width and float properties for certain classes. Despite my attempts, it seems that the elements are not positioning ...

htmlcsscss-floatmargin

Altering CSS attribute values using a random number generator

Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1. @keyframes blink { 50% { border-color: #ff0000; } } p{ animation-name: blink ; animation-duration: 0.1s ; animatio ...

javascripthtmlcss

The issue of children inside a parent div not respecting the height value set to 100% when the parent div has a min

My goal is to adjust the height of children elements within a parent div that has a min-height of 100%. I want the wrapper's height to dynamically adjust based on the content it contains. When I set the min-height to 100%, the wrapper expands accordin ...

htmlcss

The active class consistently adds new menu options without removing the previous ones

I am facing an issue with my menu where the active class does not get added to the new menu item when clicked, despite being removed from the previous item. Below is the code snippet: <div class="row text-center" id="side-menu"> <nav> ...

jqueryhtmlcssnavigation

Creating custom styles using Material-UI's makeStyles function with both before and after

Currently, I'm tasked with a project that involves utilizing the CSS code below. .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px; border-radius: 18%/5%; } I am wondering if there is a method to apply the specified style ...

cssreactjsmaterial-uijssmakestyles

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

javascriptjqueryhtmlcss