Having trouble adding animation to button element following the application of :after pseudo-element styling

I've been grappling with pseudo elements, but I just can't seem to make a simple button animation work using them.

My goal is to have a panel move from bottom to top on hover. Similar to the button found on this page (1st row, 2nd button).

From what I understand, adding .btn:after will apply any CSS styles after each instance of the .btn class. But why isn't it working in this case?

.btn {
    border: 1px solid #65bb39;
    color: #fff;
    background-color: #65bb39;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #65bb39;
    background-color: #fff;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
<div class="text">
  <span class="btn">Test</span>
</div>

When hovering, I want the border to change to #65bb39 and the block to fill up with white (from bottom to top).

Any feedback on before and after would be greatly appreciated!

htmlcss

Answer №1

To create a hover effect for the button, we can add a hover state to the btn:after and transition the CSS between the two states. Take a look at the code snippet below.

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn {
    color: #fff;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn:hover{
    color: #65bb39;
}

.btn:after, .btn:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    color: #65bb39;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #65bb39;
    background-color: #fff;
}

.btn:before {
  z-index: -2;
  background-color: #65bb39;
  height: 100%;
}

.btn:after {
  z-index: -1;
}

.btn:hover:after {    
    height: 100%;
}
<div class="btn">Test</div>

Answer №2

Here is the solution you've been seeking:

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25em;
  text-align: center;
  line-height: 75px;
}

.button {
  height: 75px;
  width: 200px;
  position: absolute;
  border: 1px solid #65bb39;
  background: transparent;
  transition: all .3s ease-in-out;
}
  .button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #65bb39;
    z-index: -1;
    transition: all .3s ease-in-out;
  }

.button:hover {
  color: #65bb39;
}
  .button:hover::after {
    height: 0%;
  }
    .button:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: white;
      z-index: -2;
    }
<a href="#" class="button">Button</a>

Answer №3

Here is the code snippet for creating a stylish button:

.btn {
  border: 3px solid #65bb39;
  background: none;
  color: #65bb39;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  outline: none;
  position: relative;
  transition: all 0.3s;
}

.btn:hover {
  color: #FFFFFF;
}

.btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #65bb39;
  z-index: -1;
  transition: all 0.3s;
}

.btn:hover:after {
  height: 100%;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="text">
  <span class="btn">Test</span>
</div>

Answer №4

Give this a shot

.btn {
  border: 2px solid #65bb39;
  background: none;
  color: #fff;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  outline: none;
  position: relative;
  transition: all 0.3s;
}

.btn:hover {
  color: #65bb39;
}

.btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #65bb39;
  z-index: -1;
  transition: all 0.4s;
}

.btn:hover:after {
  height: 0%;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="text"><span class="btn">Sample</span></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

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

javascripthtmlcssleaflet

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

javascriptcssreactjsreact-nativereact-native-maps

Activate jquery code during interaction

I am in need of a scalable image that can be centered within a scalable <div>. Currently, I have a wrapper <div> along with the scalable <div> that contains the image. Additionally, there is some jQuery code in place to calculate the widt ...

jqueryhtmlcss

What is the method used to incorporate the radial gradient in this design?

As I was browsing the internet, I came across several websites with beautiful natural gradients on their backgrounds. However, I'm puzzled as to how they achieved this effect. It doesn't seem like a simple image file because the gradient adjusts ...

css

jQuery text alignment breaking bug

I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...

jquerycss

Angular material input featuring an additional component

Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content la ...

csstwitter-bootstrap-3material-designangular-material

Electron triggers MouseLeave event on child elements

Dealing with mouse hover events can be a bit tricky, especially when working with AngularJS in an Electron-hosted app. Here's the HTML template and script I'm using: HTML: <div id="controlArea" (mouseenter) = "onControlAreaEnter()" ...

javascripthtmlangularjstypescriptelectron

JavaScript plugin designed for effortless conversion of JSON data to structured HTML code

I want to add this JSON data to an HTML element. [ { "website":"google", "link":"http://google.com" }, { "website":"facebook", "link":"http://fb.com" } ] Is there an easy way to convert this using a plugin ...

javascriptphpjqueryhtmljson

Is there a way to position text to the right of an image?

Looking for some help with aligning text to the right of an image within a hyperlink. I want the hyperlink to fill the rectangle and achieve a specific layout similar to attachment1, but currently getting something different like attachment2. If anyone ha ...

css

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

javascriptangularjsjsonhtml

Transition effects on table images using CSS

How can I incorporate CSS transitions into my holiday list? When hovering over an image, I want it to display a larger size and then return to normal when the mouse is moved off. I understand how to do this with JavaScript, but I prefer to achieve this e ...

htmlcsscss-transitions

Looking to display dropdown menus on a new line along with a text input field using jQuery?

<script type="text/javascript"> var arr = [{ val: 1, text: 'Option 1' }, { val: 2, text: 'Option 2' }]; $(function () { $('a').click(function () { var sel = $('<select>&apo ...

jquerycss

Vertically Center Image in a Div

I have been struggling to center an image within a div, but all the usual methods like using margin: auto; do not seem to work. I have tried various popular techniques with no success. <style> /* Add a black background color to the top navigation ...

htmlcsscss-grid

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

javascriptjqueryhtmlcssimage

Struggling with connecting relative hyperlinks

When constructing a website, I have opted to use relative hyperlinks. The file structure is organized as follows: /root/website1/ All my code resides within the website1 folder. Within website1, the structure looks like this: /css style.css /static ...

phphtmlcss

Is it possible to assign unique QFont types to individual Unicode characters?

I have a unique challenge of displaying multiple international scripts within the same string in a QLabel. For example, the text on the QLabel might look like this: چاچي चाची ćāćī (dim. of ćāćā, q.v.), s.f. A paternal aunt (=ćaćī ...

htmlunicodefontsinternationalizationqt4

I encountered an AJAX error while working on my project

Encountering an error with my login_process.php when using ajax, preventing me from progressing. All files are stored in a single folder. Upon running the HTML log-in page, the error becomes visible. Below is the code snippet, quite straightforward. Previo ...

phphtmlajax

Determining if an HTML dialog was closed using the escape key

Wondering about detecting when an HTML dialog is closed using the ESC key. Specifically referring to the HTML dialog, not jQuery. ...

htmldialog

Hover animation using CSS is a great way to add interactivity

I'm trying to create an animation in a moving box that flips upside down when the mouse is raised. I've attempted to use keyframes and hover to achieve this effect, but it's not working as expected. Any suggestions on how to make it work? ...

htmlcss

Ways to customize a directive to show conditionally with no need for container elements

I have created a basic role-based security directive in angularjs. It's my first attempt at making a directive. My goal is to replace the following HTML: <authorize if-granted="GET_POSTS"> Hello WORLD!!!! {{name}} </authorize> with j ...

javascripthtmlangularjsangularjs-directive