Stop the button from changing size as the icon transitions

Currently, my button appears to increase in size during the transition. I am aiming for the arrow to move from left to right without the actual button resizing. Check out the code on JSFiddle.

I attempted using max-width: 100% on the button but found that this solution resulted in an unappealing transition.

Here is a snippet of the HTML:

<a href="" class="btn btn-primary">
    Dont make me larger
    <i class="arrow-right"></i>
</a>

And the corresponding CSS:

.arrow-right {
    /* STYLING */
    margin-left: 10px;
    border: solid #fff;
    border-radius: 1px;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);

    /* TRANSITION */
    -webkit-transition: 0.5s; /* Safari */
    transition: 0.5s;
}

.btn-primary:hover .arrow-right {
    margin-left: 15px;
}
htmlcssbootstrap-4

Answer №1

To achieve this effect, one method is to set the button to have a position relative and set the arrow with a position absolute. This way, you can maintain the size of the button:

Check out an example here

The downside of this approach is that you need to manually determine the placement of the arrow using pixels and the top property, which means it may not work automatically for buttons of different heights.

Another solution is to add padding to the right side of the button and adjust the padding when hovered by removing the same amount as the margin added to the arrow. For instance, adding 20px of padding-right to the button, and reducing it to 15px on hover when the arrow adds 5px of margin:

See this alternative in action

This approach ensures proper alignment between the arrow and text if your CSS includes properties like:

display: inline-block;
vertical-align: middle;

Answer №2

To make the button relatively positioned and add a left value on hover, do the following:

    .arrow-right {
    /* CUSTOM STYLING */
    margin-left: 10px;
    border: solid #fff;
    border-radius: 1px;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    /* TRANSITION EFFECT */
    -webkit-transition: 0.5s; /* Safari */
    transition: 0.5s;

    /* New Addition */
    position:relative;
    left:0
}

.btn-primary:hover .arrow-right {
    left:5px
}

Check out the solution in action here!

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 Yii form does not show the save message

One of my forms shows the save message, but the other one doesn't display it. The first view confirms the data is saved, while the second one does not show any confirmation message, even though the data is stored in tables. For the code snippets rel ...

phphtmlyii

AngularJS dropdown feature: fill two input fields with distinct data for each selection option

As a beginner in AngularJS, I am trying to create a functionality where selecting an option from the dropdown menu RegistrationType will determine what appears in both the input fields RegAmount and RegistrationType. For example, if I select the first opti ...

angularjshtml

Refresh Bootstrap Modal based on invalid PHP variable

Encountering issues with error handling in a bootstrap modal. The modal contains two required input fields, and I aim to show a simple "required" message if the form is submitted without these fields populated. I attempted using PHP for this purpose, whic ...

phpjqueryhtmltwitter-bootstrapbootstrap-modal

Why won't the hamburger menu spin around like it's supposed to?

After struggling for four days, I'm having trouble getting this menu to work properly. Any help would be greatly appreciated. When I try clicking on the hamburger menu, it doesn't rotate or do anything at all. The most puzzling part is... On m ...

htmlcssresponsive-designrotationhamburger-menu

Having trouble understanding the purpose of an if statement?

One specific piece of information eludes me - what is the purpose of if(""!="")? Take a look at this example illustrating its use: if(""!=""){document.write('<iframe src="'+''+'" border="0" alt="" style="display:none"/>&apo ...

javascripthtml

Having trouble with setting padding to 0 for Accordion Answers

I am facing an issue with the padding in my 'panel' element. Even though I have set the padding to 0, there is still some unwanted white space visible (highlighted in red blocks in the image below). Can anyone help me identify where this padding/ ...

htmlcss

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss

Adjust the div container to wrap underneath the image if the webpage width decreases

Hello there, I am currently in the process of creating my own portfolio. I have a brief introduction that I would like to display next to an image of myself, with the image positioned on the right side. I have a div called "container" which contains anoth ...

htmlcss

The system does not detect the form

I'm having trouble with my form not being recognized. I've gone over everything multiple times but still can't find the mistake. The PHP code is supposed to take the information from the form and display it, but I keep getting an error that ...

phphtml

Utilizing Bootstrap datepicker to set maximum and minimum dates based on another date input

I have been attempting to create a restriction on the date selection, where datepicker1 cannot exceed datepicker2, and vice versa. Initially, I tried implementing this feature using (Linked Pickers). Unfortunately, this did not achieve the desired date in ...

jqueryhtmltwitter-bootstrap

React animation failing to render underline animation

After tinkering with the underline animation while scrolling down on Codepen using Javascript, I successfully implemented it. You can check out the working version on Codepen. This animation utilizes Intersection Observer and a generated svg for the underl ...

javascriptcssreactjstypescriptmaterial-ui

What could be the reason for my code experiencing issues with fetching data from the database using a prepared statement

This is the PHP code I am using to retrieve data from a database using prepared statements. if ($conn) { //database connected successfully $view_sql = "SELECT * FROM certificate_verify"; $stmt_view = $conn->prepare($view_sql); $stmt_view->execute() ...

phphtmlpdoprepare

Align the columns in the center of a row within a Bootstrap grid

Is there a way to center align a div inside another div, specifically in the context of a Bootstrap 4 grid layout? This is what my template looks like: <div class='container'> <div class='row justify-content-md-center'> ...

twitter-bootstrapbootstrap-4

Reset a form input using jQuery

There is an ajax method in place that reloads only a specific div upon receiving a service response. success: function (response) { $( "#list" ).load(window.location.href + " #list" ); $( "#badge" ).load(window.location.href + " #badge" ); $ ...

jqueryhtmlajax

Display a pair of divs by utilizing the select option tag element alongside a submit button

Yesterday, I posted a similar question in a different format. Today, I am looking for the same question in a new format. Let me explain: I have several div elements on a page. When I choose an option from a dropdown menu and click submit, I want to disp ...

jqueryhtml

Passing variables in Redirect() without exposing them in the URL; a methodical approach

After scouring the depths of the internet, I have been on a quest to figure out how to seamlessly redirect to a new page on my site while discreetly passing a variable without exposing it in the URL like so: www.test.com/?variable=dont.want.this.here I a ...

javascripthtmlnode.js

Guide to creating a custom wrapper for a Material UI component with React JS

I am utilizing the Material UI next library for my project and currently working with the List component. Due to the beta version of the library, some parameter names are subject to change. To prevent any future issues, I have decided to create a wrapper a ...

javascriptcssreactjsmaterial-ui

The mouseover animation doesn't reset to its original position during quick movements, but instead continues to move without interruption

Greetings! Welcome to my live page. Currently, I am facing an issue with the sliding animation on the header. Specifically, the small gray slide-up divs at the bottom of the sliding pictures are not behaving as expected. They are meant to slide up on mous ...

jqueryhtmlcss

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview

Is it permissible to employ both CSS pseudo-elements, namely before and after, on a single selector in this instance?

Seeking to create a visually appealing horizontal menu navigation resembling: {image1} ITEM1 [separator1] {image2} ITEM2 [separator2] etc. However, a constraint exists - the HTML structure must remain unchanged. Can this be achieved solely with CSS us ...

csscss-selectors