This question already has answers here:
CSS transition shorthand with multiple properties?
(7 answers)
Closed 2 months ago.
I have a button that needs to transition its color both when it's hovered and clicked. When clicked, I add it a class name called .selected.
Setting transition property to the button makes every style transition which is unintentional.
.score-button {
width: 35px;
height: 35px;
border: 1px solid var(--fill-button-text8);
background-color: transparent;
border-radius: 23px;
color: var(--fill-button-text8);
cursor: pointer;
font-size: 18px;
font-weight: 600;
transition: linear 0.5s;
&:hover {
background-color: var(--fill-button-bg-hover);
}
&.selected {
border: none;
background-color: var(--primary-color);
color: var(--fill-button-text);
}
}
You can specify a property to transition:
transition: background-color linear 0.5s;
.score-button {
width: 35px;
height: 35px;
border: none;
border: 1px solid var(--fill-button-text8);
background-color: transparent;
border-radius: 23px;
color: var(--fill-button-text8);
cursor: pointer;
font-size: 18px;
font-weight: 600;
transition: background-color linear 0.5s;
&:hover {
background-color: var(--fill-button-bg-hover);
}
&.selected {
border: none;
background-color: var(--primary-color);
color: var(--fill-button-text);
}
}
Related
I am adding buttons to my project and am having difficulty figuring out why the background around the svg is showing both the background of the button and the page's background in a square around the svg.
Any idea what how to fix my scss/css? The code sandbox is here.
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
}
}
//Home button behavior is here
.home-button {
margin: 1rem;
border: none;
outline: none;
}
.home-pic {
border: none;
width: 2.5rem;
}
Here is how you fix it:
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
// apply hover effect to the home button
.home-pic{
background: blue;
}
}
}
//Home button behavior is here
.home-button {
// do you really need these styles?
// margin: 1rem;
// border: none;
// outline: none;
}
.home-pic {
border: none;
// I added these styles
width: 1.1rem;
transition: 0.3s ease-in-out;
background-color: lightblue;
}
I have a problem with losing opacity of my form in Mozzilla:
What is more in Chrome everything is great:
Do exist some tolls for set my CSS3 code to each browser? it would be great when it would add additional lines with -o- -moz- ect. prefixes.
My code is nothing special...
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom-width: 3px;
border-color: #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
}
Try now it works, Border style was not defined and that's why it was not working Firefox.
You can either define it in one line or in multiple lines i.e. property of border as below,
.input2{
border-bottom : 2px solid #CCCA14;
}
or
.input2{
border-bottom-width : 2px;
border-color : #CCCA14;
border-style : solid;
}
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom: 3px solid #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
outline:none;
}
<input type="text" class="input2">
I'm trying to make a gradual background colour change from normal to a hover colour, but, unfortunately, everything I've read and tried didn't work. This is the code I have:
.button-submit {
color: #ffffff;
cursor: pointer;
display: inline-block;
line-height: 35px;
background: #5ea12b;
padding: 0px 20px;
vertical-align: middle;
font-size: 18px;
min-width: 80px;
min-height: 35px;
font-family: Light;
border: 1px solid transparent;
margin: 5px;
}
.button-submit:hover {
background: #5ea12b;
color: #FFFFFF;
}
Use transition property:
EG:
.button-submit {
background: #5ea12b;
transition: background 0.5s ease-in-out;
}
And on hover, change the background color to little darker tone.
.button-submit:hover {
background: #000;
}
CHECK THE DEMO
I would like my button to have a background/font-color transition when I hover it, but not when I am clicking it (active).
Currently I have the transition effect on both hover and active.
I tried adding transition: 0s ease-out; on either :active or :hover but I didn't get the expected result.
What is correct, cleanest and simplest way to do this (by using css) ?
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button>
Thanks a lot.
Try this https://jsfiddle.net/2Lzo9vfc/93/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: red;
background-color: blue;
outline: 0;
transition: none;
}
If you want the button to go back to it's original colors on button:active, then adding in the original values to the :active block will correct this.
However, if you want to display the colors you have while hovering over the button while active, simply removing the :active block will give that effect.
Both are here next to each other. Hopefully this is what you wanted. :)
https://jsfiddle.net/2Lzo9vfc/94/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:active {
background-color: #fff;
color: #6cb4d5;
outline: 0;
transition: none;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button> <br><br>
<button type="submit" name="sub-avatar-url2" id="sub-avatar-url2"> UPLOAD</button>
This May Help you-
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-in;outline: 0;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;transition:all 0ms ease-out
}
button:focus{transition:all 0ms ease-out}
You could try applying the transition: 0s; to the active statement - however, you also need to add in the :focus event to the declaration chain to prevent the button transitioning when you release the click.
You can see the fiddle here:
http://jsfiddle.net/eks8Lc5c/
I have a problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>