What You Need to Know About Hovering and Highlighting Buttons Using CSS

As a beginner in CSS, I decided to practice padding and margin mechanics by creating two buttons. Now, I'm trying to make the buttons larger without one button pushing the other out of place. I managed to achieve this for the save button, but I'm struggling with the other one.

.apply-button {
  margin-left: 20px;
  margin-right: 20px;
  background-color: rgb(10, 102, 194);
  color: white;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 120px;
  font-weight: bold;
  font-size: 17px;
  margin-top: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, margin-left 0.15s, margin-right 0.15s, padding-left 0.15s, padding-right 0.15s, font-size 0.15s;
}

.apply-button:hover {
  margin-left: 13px;
  margin-right: 13px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 18px;
  background-color: rgb(0, 59, 122);
  color: rgba(255, 255, 255, 0.801);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26);
}

.save-button {
  margin-left: 18px;
  margin-top: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(10, 102, 194);
  border-color: rgb(10, 102, 194);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  transition: box-shadow 0.15s, margin-left 0.15s, padding-right 0.15s, padding-left 0.15s;
}

.save-button:hover {
  margin-left: 10px;
  background-color: rgba(87, 171, 255, 0.26);
  padding-left: 24px;
  padding-right: 24px;
  border-width: 3px box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
}

.save-button:active {
  background-color: rgb(10, 102, 194);
  color: white;
}
<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>

Although I attempted to adjust the margins while increasing the padding upon hovering, the larger button is still pushing the other one as it expands. Being new to this, I acknowledge that there may be alternative methods to solve this issue. Thank you.reference video

htmlcssstyling

Answer №1

To enhance the design, try incorporating transform: scale;.

.apply-button {
  margin-left:20px;
  margin-right:20px;
  background-color:rgb(10, 102, 194);
  color:white;
  border:none;
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:120px;
  font-weight:bold;
  font-size:17px;
  margin-top:none;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);
}
.apply-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgb(0, 59, 122);
  color:rgba(255, 255, 255, 0.801);
  box-shadow:0px 4px 10px rgba(0, 0, 0, 0.26);
}
.save-button {
  margin-left:18px;
  margin-top:50px;
  background-color:rgb(255, 255, 255);
  color:rgb(10, 102,194);
  border-color:rgb(10, 102,194);
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:40px;
  border-width:2px;
  border-style:solid;
  font-weight:bold;
  font-size:17px;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);

}
.save-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgba(87, 171, 255, 0.26);
  box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
  
}
.save-button:active {
  background-color:rgb(10, 102,194);
  color:white;
  
}
<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>

Answer №2

When applying the hover effect to a button, make sure to increase the padding and reduce the margin simultaneously for the desired effect. By keeping the overall size of the button constant (text size + padding + margin), you can achieve the intended result. Here's an example:

#left {
  margin: 5px;
  padding: 5px;
}
#left:hover {
  margin: 0px;
  padding: 10px;
}
#right {
  margin: 5px;
  padding: 5px;
}
#right:hover {
  margin: 0px;
  padding: 10px;
}
<button id="left">Left</button>
<button id="right">Right</button>

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 CSS transition will only be triggered when the class is turned on, not when it is turned off

Having some trouble with a transition effect involving multiple elements on a page. Specifically, I am working on a sliding side menu for the responsive top navigation menu. The goal is to have the relative body and a fixed header bar move to the right whe ...

jquerycsscss-transitions

Exploring Options for Enabling HTML in AngularUI Accordion-Group Content

I want to showcase content in an accordion-group that might contain HTML markup. This content is fetched from external sources. How can I achieve this? You can check out an example at Plnkr (content hard-coded for testing) Currently, the items are displa ...

javascripthtmlangularjsaccordion

Customizing Background Color in React Bootstrap Table Based on Value

Having a little issue that's causing me some trouble. I have a React Bootstrap Table displaying data from an API, and I'm looking to enhance it by changing the row color to green if a specific value is greater than zero. Here is an example: const ...

javascriptcssreactjsreact-bootstrapreact-bootstrap-table

The tableize-table R function functions effectively in .html format, but unfortunately does not appear correctly when displayed in Gmail using MIMEText

Hi there, I am a beginner working with HTML. I have the following settings in my .html file, and it displays correctly when opened in a browser like Chrome or Safari. (in browser) https://i.sstatic.net/O6YoC.png --> (failed in Gmail) https://i.sstatic. ...

pythonhtmlgmailhtml-emailmime

jQuery Mobile for Enhanced Customer Relationship Management on the Web

I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...

jqueryhtmlcssjquery-mobilecrm

Using jQuery to Decode the XML Document Containing National Threat Level Data

Recently, I've been experimenting with using jQuery to extract data from the DHS Threat Level found in their XML file. However, despite my efforts, I haven't been able to make it work. As a newcomer to Javascript and non-presentational jQuery, I& ...

javascriptjqueryhtmlxmlajax

Having trouble interacting with element - Selenium WebDriver is not allowing the click

I'm attempting to select the Checkout Button. This is what it looks like : https://i.stack.imgur.com/TiMEO.png And here's the HTML snippet for it : <div id="buy-button-next"> <span data-reactroot=""> <div data-cid="buy- ...

javacssseleniumselenium-webdriverxpath

Design a CSS floating div with a captivating bubble effect

My current setup includes a DIV element styled as follows: <div class="modal"></div> .modal { position: fixed; z-index: 999999; right: 310px; top: 67px; width: 431.6px; height: 550px; border-radius: 25px; box-s ...

css

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Is there a way to preserve the original image while having a draggable blur mask over it? If you want to see an example of a draggable blur mask over an image, you can check out this link: https://codepen.io/netsi1964/pen/AXRabW $(function() { $("#ma ...

javascriptjquerycsscanvas

Is it possible to implement a delay period or prompt for user confirmation before the transition can be repeated?

When using CSS to code for an image or box to move when hovered over, there can be unexpected results. If the mouse is positioned within the click area at the beginning of the transition but not at the end, the effect may repeat indefinitely and stutter if ...

htmlcsshovercss-transitions

Trigger a jQuery click event to open a new tab

On a public view of my site, there is a specific link that can only be accessed by authenticated users. When an anonymous user clicks on this link, they are prompted to log in through a popup modal. To keep track of the clicked link, I store its ID and inc ...

javascriptjqueryhtml

Emphasize cells and headers when a cell's value deviates from its initial value

I implemented cell editing in my primeng table. Here is the code: <div class="card"> <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }"> <n ...

htmlcssangularprimengangular10

GWT Designer style issue plaguing development efforts

Currently, I am working on designing a login view using GWT Designer while incorporating styles from Twitter Bootstrap. The structure I have set up is as follows: However, the displayed result does not meet my expectations: Despite setting all CSS paddi ...

cssgwtstylesgwt-designer

Separate compound words without hyphens at the boundaries of each word

I am currently incorporating the use of Bootstrap for my project. Let's assume that I have text displayed in this way: "Stackoverflow" Is there a method to automatically ensure that it breaks like below if the text exceeds the container: "Stack ...

htmltwitter-bootstrapcss

Seeking a jQuery Carousel with a Blizzard-inspired design

Can anyone recommend a jQuery carousel that has similar features to the one found on Blizzard's homepage? I'm looking for a carousel that is centered, does not show horizontal scroll bars even if the content extends beyond the browser width, supp ...

jqueryhtmlcsscarousel

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

htmlcssangularangular-material

What is the best way to align content in the middle of a containing div?

I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...

csshtml

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

By utilizing the window.history.back() function, it takes me four clicks to navigate back one page

I find it peculiar that my back button is using the JS method window.history.back() to return to the previous page. However, I have noticed a strange behavior with this button. When I click on it before the entire document loads, it functions as expected a ...

javascripthtml

Stop mega menu items from disappearing when hovered over

I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear. Here is the HTML code snippet: <li class="dropdown mega-dropdown m ...

javascriptjqueryhtmlcssbootstrap-4