Preventing Button Shifting in CSS: A Guide

I have a website at antetech.org where I am using bttn.css for the navigation buttons. The issue I am facing is that when I hover over a button, the letter-spacing doubles, causing all the buttons to the left to shift over. Is there a way to maintain the letter-spacing effect without affecting the position of the other buttons? Below is the bttn.css code that I am currently using:


- Code snippet omitted for brevity -

I'm not certain if what I'm attempting is achievable, but I appreciate any assistance provided. Thank you in advance! <3

htmlcss

Answer №1

If you want your buttons to be big enough to display text with expanded letter spacing, you can set a min-width for them like this: 

.bttn-stretch { min-width: 5.25em; }

Using em units ensures that this style will work consistently, regardless of the font size. It's also a good idea to specify the letter spacing in fractional ems.

Consider limiting the hover effect to devices without touch capabilities. Here's an example:

@media only screen and (min-width: 420px) {
    .bttn-stretch { min-width: 5.25em; }
    .bttn-stretch:hover, .bttn-stretch:focus {
        letter-spacing: 0.104em;
        opacity: 0.9;
        -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
}

Answer №2

To achieve the desired functionality, you can set the width of the parent div containing your buttons and also specify a fixed width for the buttons themselves. Keep in mind that you may need to adjust the values based on your specific requirements. Additionally, ensure that the layout remains responsive by making necessary CSS adjustments for mobile screen sizes.

#secondary-navigation{
  list-style: none;
  float: right;
  margin-top: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 15px 0;
  display: block;
  width: 480px;
}

#secondary-navigation li{
  position: relative;
  display: inline-table;
  padding: 5px 20px;
  width: 70px;
}

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

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

Ways to align list items in the middle of a webpage with CSS

Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here. My goal is to have the links adjust to align left based on the browser size, and also have the imag ...

htmlcsswordpressresponsive-designhtml-lists

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

javascriptcssangulartypescriptangular-material

The event tooltip in fullcalendar does not show up as expected

Within my Laravel 5.8 / Bootstrap v4.1.2 / jQuery jQuery v3.3.1 fullcalendar v4.3.1 application, I am attempting to incorporate tooltips for events in the fullcalendar plugin. To achieve this, I referred to a specific example provided here: Sample Example ...

javascriptcssfullcalendartooltipfullcalendar-4

Obtaining the Value of Input Text

Let's say you have the following HTML code: <form> Enter hash here: <input type="text" name="hash"> <button type="submit" formaction="/tasks/">Retrieve Url</button> </form> Is there a way ...

javascripthtml

Creating an interactive form with file uploads using JQuery Mobile

I'm currently working on a JQuery Mobile page that is designed to enable video uploads to the Google App Engine Blobstore, complete with title, description, and more. Below is the HTML code for the form: <form class="form-horizontal" action="{{ u ...

htmlgoogle-app-enginegoogle-cloud-datastoreblobstorejquery-mobile

What is the best way to create a self-referencing <div> in HTML?

After extensive research, I turn to seeking advice and guidance on Stack Exchange. I have a seemingly straightforward goal in mind. I want to create a <div> id/class that will automatically generate a link to itself using scripting of some sort. Be ...

javascriptphphtmlcss

Retrieving the chosen option from a radio button

<!DOCTYPE html> <html> <body> <input type="radio" name="colors" value="red" id="myRadio">Red color <p>Click the "Try it" button to display the value of the value attribute of the radio button.</p> <button onclick=" ...

javascripthtml

Using Javascript to retrieve the selected value from a dropdown menu does not return any results

Struggling to retrieve the selected value from a drop-down list using JavaScript? Even when an item is chosen, do you keep getting 'null' as the result? Let's take a look at the HTML page: <select class="mySelect"> <option val ...

javascripthtmlselectdrop-down-menugetelementbyid

A step-by-step guide on utilizing jQuery to cyclically change the background color of elements upon clicking, and resetting the colors upon clicking another element

So I've been working on a solution to change the background color for accessibility purposes on a client's website. To achieve this, I have a set of div elements with different background colors and I'm using jQuery to update the body backgr ...

jqueryhtmlcss

Is there a way to determine if jQuery Mobile has already been loaded?

I am dynamically loading jqm and I'm trying to determine if it has been previously loaded in certain scenarios. Is there a method to check for the presence of jqm? ...

javascriptjqueryhtmljquery-mobile

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

cssreactjstabulator

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

javascriptjqueryhtmljsonajax

Issue with CSS transition not displaying ng-show elements properly

I'm currently working on incorporating a fade-in effect for text using the second solution from this source when using ng-show. Here is my HTML setup: <input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Cli ...

javascriptcssangularjs

Issue with Bootstrap4 Carousel not scrolling horizontally

I'm currently working on creating a carousel following the Bootstrap code snippet page. It features three images and is designed to have slide controls that move left and right. The script tags with the necessary scripts are located at the bottom of t ...

javascripthtmlcssbootstrap-4

Include a border around the list items within two separate columns

I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried: .ul1 { column-count: 2; column-gap: 0px; } .li1 ...

htmlcsscss-selectors

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg

The Chrome Keyboard on Android seamlessly passes words to the next input field when the focus changes in JavaScript

When using two input fields, pressing the enter key on the first field in Chrome (49) on Android (6.0.1) carries over the last word typed to the new input due to the right-bottom button on the standard keyboard. Is there a way to prevent this behavior or a ...

javascriptandroidhtmlgoogle-chrome

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

javascripthtml

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping