The hover effect is not resizing the button as expected

I attempted to create a similar effect like this:

https://i.sstatic.net/hbiOS.gif

As you can see, when the mouse hovers over the button, it has a scaling and fading white effect.

I tried to achieve the same effect on my Bootstrap button by customizing my CSS, but for some reason, it doesn't scale up and produce the desired scaling and fading white effect as seen in the example.

Here's what I have tried so far:

body {
  background: #6FDC9C !important;
}

a.btn.btn-primary.btn-lg.signup{
  font-size: 1.2em;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 30px;
  background: #fff;
  color: #C056BB;
}

a.btn.btn-primary.btn-lg.signup:hover{
  background: transparent;
  color: #fff;
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
}

a.btn.btn-primary.btn-lg.signup:hover::after{
  -webkit-transform: scaleX(1.4) scaleY(1.6);
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<a class="btn btn-primary btn-lg signup btn-animated" href="#" role="button">SIGN UP</a>

However, this CSS didn't achieve the desired outcome. Any insights on what I might be missing here?

htmlcssbootstrap-4

Answer №1

INCORPORATING CSS EFFECTS To enhance your design, it's important to first establish a virtual .btn element that expands and fades away, revealing the original button. Only then should you implement the :hover::after effect. Consider the following approach:

a.btn.btn-primary.btn-lg.signup::after {
    content: "";
    display: inline-block; /* reconsider necessity */
    height: 100%;
    width: 100%;
    border-radius: 100px; /* adjust border-radius if needed */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1; /* ensure it's positioned behind original button */
    transition: all 0.2s ease-in; /* smooth transition effect */
}

Integrate this code snippet and share your thoughts on the outcome!

Answer №2

My go-to technique for scaling on hover involves a slight tweak. Instead of using the traditional method with `:hover::after`, I prefer removing that and applying `transition: all .2s ease-in` to the class along with `transform: scale(1.1)` on hover.

a.btn.btn-primary.btn-lg.signup {
  font-size: 1.2em;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 30px;
  background: #fff;
  color: #C056BB;
  transition: all .2s ease-in;
}

a.btn.btn-primary.btn-lg.signup:hover {
  background: transparent;
  color: #fff;
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
  transform: scale(1.1);
}

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

The controller and node js request associated are invisible to my HTML page

Here is my HTML code. I have just created a unique controller for a specific part of the code. <div class="mdl-grid" ng-controller="ValueController"> <div class="mdl-card mdl-shadow--4dp mdl-cell--12-col"> <div class ...

javascripthtmlangularjsnode.js

Validating HTML Forms Using PHP

I am experimenting with a basic HTML login form, but I can't seem to get it to function properly. This is all new to me as I am just starting out with PHP programming. Any assistance would be greatly appreciated! <?php $correctPassword = 'ho ...

phphtmlformsauthentication

react dealing with clicking and blurring at the same time

Is there a way to ensure an input's onBlur event fires only after a button's onClick event is completed? The challenge is that the function relying on the state change caused by the onClick needs to be executed by the onBlur event. Using setTimeo ...

javascripthtmlreactjs

My image is being cropped on larger screens due to the background-size: cover property

I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...

cssbackground-image

Exploring the use of React material-ui Drawer list to render various components onClick in your application

Working on designing a Dashboard with the React material-ui package involves implementing an App bar and a Drawer containing a List of various items. The objective is to render the corresponding component inside the "main" tag of the Drawer upon clicking a ...

htmlreactjsreact-routermaterial-ui

Reloading a page will display [object CSSStyleDeclaration]

Upon editing content and saving changes, instead of displaying my updated content when refreshing the page, it shows [object CSSStyleDeclaration]. function newElement() { let li = document.createElement("li"); let inputvalue = document.querySelector ...

javascripthtmlcss

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

javascripthtmlangularjs

What causes the burger dropdown to be concealed by additional content?

While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. https://i.sstatic.net/7K9FD.png I am using Mantine wit ...

cssreactjsnext.jsoverflowmantine

Is there a way to change the background color of the body on click and have it applied throughout the entire site

Is there a way to change the background-color of the entire site and specific modal elements when a user switches between two radio buttons? Here is the HTML code for the radio buttons: <div class="btn-group btn-group-xs" data-toggle="buttons"> ...

javascriptjqueryhtmlcssbackground-color

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

Refining to Showcase One Menu Selection

I am having an issue with my bootstrap menu that includes a search field. The problem is that when I try to filter the dropdown menu using the search field, it filters all dropdown items instead of just the one I want. For example, if I search for a term f ...

javascriptjquerybootstrap-4

CSS Problem: Background Color Not Showing Up in Table Rows

Check out my fiddle below: https://jsfiddle.net/teo7auv3/ I'm facing a challenge where I want to change the background color of the entire table row (TR) to red when there are validation errors. The problem seems to be related to this code snippet: ...

csscolorsbackgroundcss-tables

Create circles with a variety of different colors on the canvas

I need assistance with creating an animation where circles move from right to left on a canvas. The colors of the circles are randomly selected using a function. Currently, I have a fiddle where a single circle moves from right to left, changing color ever ...

javascripthtmlcordovacanvas

Incorporate a fresh button into the Tinymce toolbar using C# programming

I have utilized Tinymce text editor/textarea in my webpage. How can I incorporate an additional button onto the toolbar? For instance, upon clicking the added button, it should prompt a dialog with three textfields: title, age, and gender. Upon filling ou ...

javascriptc#htmlcsstinymce

What is the process of adding information to a database from a table using JSP?

Is it possible to store data into a database using JSP? Here is the code I have written, can you please help me find and correct any errors in it? My goal is to fetch data from form fields in a JSP page and store it into a database. Database name: test T ...

htmlmysqldatabasejsp

Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected. ...

htmlcss

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

javascripthtml

Focusing on a specific input category inside a div container

Struggling to customize the appearance of the last input type within the Jetpack plugin in WordPress. I have experimented with the following CSS: #subscribe-submit > input[type="submit"]::last-of-type { #subscribe-submit > input[type="submit"]:nth- ...

css

Are custom boolean attributes supported in HTML?

When working in HTML5, we have the ability to utilize custom data-* attributes. However, since these are considered attributes, they generally require a string value. Is there a different option within HTML that allows for custom properties, where boolean ...

htmlcustom-data-attribute

When the page is refreshed, the value bounces back and forth between

I've encountered a strange issue on my page with 6 textboxes. Whenever I enter values into these text boxes and then refresh the page, the values seem to jump to the next textbox (the one after the next). For example, if I enter values as follows: [ ...

htmlfirefoxinput