I am new to framer motion and I want to make a hover animation on the button. I was able to create the animation successfully but when I hover over the button the text gets distorted and I want to fix it, I have done research but i wasn't able to find a solution
I want to apply animation only to the button not the text inside it
I have tried adding <motion.button layout />
I have tried adding <motion.button layout="position" />
I have also added <span>button text</span>
but the issue is still there
<motion.button
style={{
padding: "10px 30px",
border: "none",
marginTop: "20px"
}}
whileHover={{
scale: 1.1
}}
whileTap={{
scale: 0.9
}}
>
Button
</motion.button>
It would be great if someone would help me in fixing this issue,
https://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419 is my code sandbox link where u can see what I'm saying
thanks!
According to this, you can't 'disable' scaling for child components with framer. Try to use react components and variables (or CSS) to disable child scaling.
Related
Going to add an icon and the challenge is that I can't find where I can deactivate <strong></strong>. Is it possible to manipulate the icon with a tag? Library that is made is custom made.
<PlainButton
onClick={showModal}
title={modalTitle}
aria-label={modalTitle}
style={{ lineHeight: 1 }}
disabled={!notAcces}>
<SvgIcon.PreviewDocument width={19} height={19} />
</PlainButton>
In the picture the other icon is normal, and the previewDocument has the tag <strong>. Just want to make it normal.
I've currently got a button module, which, based on an array it is given, generates a button with an Image, and Text. However, now that i started adding translations to the buttons, I noticed that some translations for more complex words, are overflowing out of the button, at an inconsistent way.
The bottom left is the standard/default text in English. There is some inconsistency that I've yet to sort out, but it's all style from my understand. I am still learning how styling buttons works.
All the other buttons show what happens when a different language is presented/selected/used. The buttons update the text when language is updated, so they are dynamically refreshed with new text.
Each button is generated like this:
return <button
key={buttonName}
disabled={disabledStatus}
style={this.props.buttonStyle}
onClick={this.handleButtonClick.bind(this, buttonLowerCase)
>
<img src={...} alt={buttonName}
/>
<span style={spacer}/> || This is just {width: '5px'} for seperation||
{buttonText}
</button>;
buttonStyle is passed down with following parameters from the module:
{
width: '100px',
margin: '5px',
height: '38px',
display: 'flex',
alignItems: "center",
justifyContent: "left",
};
what are possible solutions to this? Keeping in mind, that the buttons cannot grow to be a bigger size than they are currently.
I also do notice that spacer does not seem to be respected, if text is larger than given space, now that I look at it, but have no better solution for forming a bit of space from the text at this point.
If you absolutely need to force the content into the space of the button without increasing the button size dynamically to match the text length, here are some options:
Break the words. See: "word-break" css property.
Make the text smaller where needed.
I am using the version 5.12.1 and suddenly applying style to the component like this...
<section className="container-center">
<FontAwesomeIcon icon="arrow-down" style={{ color: "var(--themeP)", style={{ fontSize: "1.5rem" }} }} />
</section>
...is no longer working.
I am using this in another project with the exactly same version and that is working fine. I noticed that is applied automatically a fa-w-14 className but this class is not actually being applied and making the icons being displayed very huge without style.
The only solution I came across was transform: scale(x) when x is the value of size. But that is not what I want since it takes all the space where it meant to be filled in the original size.
I tried insert the prop size from docs without any result, too.
My package.json related font-awesome modules are like these:
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/free-solid-svg-icons": "^5.12.1",
"#fortawesome/react-fontawesome": "^0.1.9"
Only using the solid icon.
If someone can shed some light on this, I`d appreciate the support.
The solution was mind-bendingly simple by just changing fontSize to width instead. I double-checked my workable fontawesome icons project and I used to declare fontSize.
Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>
I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.
<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>
CSS:
.buttonText {
font-size: 63px;
}
The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.
The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the style property directly on the component. It would look something like this:
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the style object as well.
http://www.material-ui.com/#/components/raised-button
Use the labelStyle prop to override the inline style for the element
http://www.material-ui.com/#/components/raised-button
<RaisedButton
label="Button"
labelStyle={{ fontSize: '63px'}}
/>
<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>
It needs to be added with lineHeight as a style prop for even spacing:
<RaisedButton style={{ lineHeight: "100px" }} label="lineHeight in style" />
Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/
Cheers
You can use classes props to override the default css styles applied to every material-ui component. You can find out more in this youtube video:
https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo
Use font-size unit as Percent (%) or em. For e.g font-size:12%