When CSS card buttons are hovered over, padding or margin is applied to the entire card (as far as I know)

Hello fellow CSS learners!

I am currently working on a frontend mentor exercise involving a 3-card preview. I noticed that after adding a hover state to the buttons, the entire card expands slightly when hovered over. The cards were created using flexbox, and despite my efforts, I have been unable to pinpoint the cause of this issue.

To see the complete setup, you can visit this link: https://codepen.io/Dungeoner999/pen/JjELjmB
/*-----*/

Does anyone have any insights on why this is happening and how I can ensure that the card sizes remain fixed?

css

Answer №1

.btn-1 is missing a border. However, when .btn-1:hover is applied, it displays a 1px border. To resolve this issue, add a 1px transparent border to .btn-1.

.btn-1 {
  color: var(--orange);
  border: 1px solid transparent;
}

Answer №2

To fix the issue, all you need to do is add a border to your .btn style. This will solve the problem of the card expanding due to an extra pixel added on hover.

border: var(--tWhite) 1px solid;

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

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

Is it possible to accomplish this using a list or a table in HTML/CSS?

I am currently working on creating a visual representation of a color catalog using hyperlinked images. My goal is to have a layout that displays the colors in a grid format, similar to this: However, the number of images per row may vary depending on the ...

phphtmlmysqlcss

Tricky CSS layout challenge: Creating a flexible width single-line design

How can I create a single-line CSS layout that flows to the right endlessly, with each box occupying a set percentage of the viewport width (e.g. 20%)? To better illustrate, refer to the following diagram: +-----------------------------+ |VIEWPORT ...

csslayout

The alignment of the Div element is incorrect following a fixed video in bootstrap

When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser. body{ font-family: 'Mina', ...

javascriptcsshtmltwitter-bootstrap-3

Using javascript, hide or show a div without using jquery or the display:none property

I am looking for a way to show/hide a div up and down, but I have some requirements: I cannot use jQuery: toggle(), slideToggle(), fade, animate, etc. all use display: none, and I need the div to still occupy space in the DOM (I will be processing things ...

javascriptcssreactjsvisibilitydisplay

Refreshing forms in Angular 2

I am attempting to retrieve values from forms using the submit event. However, I am encountering difficulty resetting those forms later on. I am using an id called "myForm" and an onclick function to try and achieve this. <form (Submit)="addMarker()" i ...

javascripthtmlcssangularjs

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

javascriptjquerycsshtml

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss

Adding a prefix to the imported CSS file

My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application. To achieve this, I provide website owners with minified JS and CSS files that they can inser ...

javascripthtmlcssnode.jsreactjs

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

Is there a way to display images in Vuetify similar to the linked image below?

I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v ...

cssvue.jsnuxt.jsvuetify.js

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

asp.netcssajax

Issues are arising with CSS .not(selector) functionality when applied to a span element

One of the challenges I'm facing is formatting a header with a span tag that contains a date and some accompanying text. The goal is to make the text bold without affecting the formatting of the date. In my CSS file, I have tried using :not(cls) to t ...

htmlcss

Vertical CSS accordion that flips when hovered within an unordered list

TASK - Flip accordion title divs vertically when hovered over. - Ensure frontface and backface display the same text and color, but with different background colors. ISSUE - I have successfully implemented a horizontal flip effect, but I am struggli ...

jqueryhtmlcss

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

javascriptjqueryhtmlcss

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

What is the best way to bring in this interface from the React-Particles-JS library?

I have been attempting to segregate my parameters from my JSX within the react-particles-js library. I organize my parameters in an Object: let config = { "particles": { "number": { "value": 50 }, ...

htmlcssreactjstypescriptparticles.js

Expanding HTML zones to reach the bottom of the screen, while implementing top and side menus using the latest HTML5 and CSS techniques

Struggling to design a page layout with two navigation sections (top and left) similar to the example below: The light gray area represents where the main content will be displayed on each page. On the left side is the secondary navigation menu that shoul ...

htmlcsscss-float

What might be causing the sticky footer to malfunction on the Samsung Galaxy Note 2's default browser?

I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Sa ...

androidhtmlcss