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
Related
The subject exists on Stackoverflow but I don't understand my problem in CSS.
How can I change a button's color on hover?
I have a login button, when I wish to hover the button. One white background should appears.
I get a small background color.
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
.btn-login a:hover {
color: black;
background-color: #FFF;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>
Change so that you hoover the button and not the a tag to change the background. And then you should change the color of the a tag. Example css below.
.btn-login:hover {
background-color: #FFF;
}
.btn-login:hover a {
color: black;
}
You should use " .btn-login:hover " instead of ".btn-login a:hover" , this is going to work .
You need to change the background color of .btn-login not .btn-login a
.btn-login:hover {
background-color: #FFF;
}
You are setting the hover on your a tag, that's why your background-color changes when you hover the a. You can change as following:
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
/* Here are the modified css */
.btn-login:hover {
color: black;
background-color: #FFF;
}
.btn-login:hover a {
color: #000;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>
You are given the hover effect for a inside the button . Thats why only a is changing the color on hover. Change the line to :
.btn-login:hover {
background-color: #ffffff; ( Your desired color )
}
The problem here is that you're not using a button but an <a> element, so when you change the background for the <a> element only the background of the writing changes. To change the background of the whole 'pseudo' button you need to change the background color of the <div> containing the <a> element while changing also the <a> element.
Your code modified accordingly to what said above:
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
.btn-login:hover{
color: black;
background-color: #FFF;
}
.btn-login:hover a{
color: black;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>
I'm hoping someone can help. I've tried a number of fixes now and don't know what I'm doing wrong.
My site is Clintonholmes.com
The code I have for my "Want to know more?" Button on my home page is as follows.
.button1 {
background-color: white;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #663366;
border: 2px solid #663366;
}
.button1:hover {
background-color: #663366;
color: white;
a.color: white;
}
For some reason, on hover, the font is grey instead of white. What am I doing wrong?
Thanks!
Clinton
It's a CSS specificity issue. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You can fix it any number of ways by using a selector with higher specificity. Here are a couple of ways.
Change .button1:hover to body.gppro-custom a:hover
Or you can change color: white; to color: white!important; in .button1:hover
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>
i'm making a button and I want to achieve an insteresting effect that you can see here.
The problem is that when on hover I put to the text rgba(0,0,0,0.0); all the button turns white, even the text.
Here's my code so far:
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: rgba(0,0,0,0.0)
}
The reason is because your hover color: was set to transparent, so of course it will be white. Try something simpler like below:
.button {
color: blue;
background: white;
padding: 5px 10px;
border: 3px solid blue;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
color: white;
background: blue;
}
button
The problem is that, you have set the text color opacity to 0 so it is like your text is completely transparent. You can simply match it to your body's background color like I did below. No need to mention the opacity, it is 1 by default.
Fixed and working code snippet:
body{
background: #0E80C6;
}
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
background: transparent; /* background changed to transparent so it shows the body's background color */
}
.button:hover{
background: #fff;
color: #0E80C6; /* color matched to that of the background */
}
<button class="button">Button</button>
Your issue was you had the opacity of the text color set to 0%. The last letter in rgba means "alpha" or opacity.
body {
background-color: rgba(42, 148, 245, 1.00);
}
.button {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
}
.button:hover {
background: #fff;
color: rgba(42, 148, 245, 1.00);/*Set this to whatever you have for the background color. the "1.00" is the opacity"*/
}
<input type="button" value="button" class="button">
RGBA(red, green, blue, alpha)
The problem is you had the opacity(alpha value) of text is 0
body{
background: blue
}
.button{
background: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: blue
}
<button class="button">Button</button>
I have some navigation links that I'm using css transitions on.
Here's the CSS...
ul.yui-nav { list-style-type: none; }
ul.yui-nav li {
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}
ul.yui-nav li:hover {
background: none;
border: 1px solid #ccc;
border-radius: 50%;
height: 110px;
width: 110px;
transition: all 275ms;
-moz-transition: all 275ms; /* Firefox 4 */
-webkit-transition: all 275ms; /* Safari and Chrome */
-o-transition: all 275ms; /* Opera */
}
ul.yui-nav li a {
font-style: normal;
border-radius: 50%;
height: 100px;
width: 100px;
background: #ccc;
float: left;
color: #fff;
text-decoration: none;
font-size: 50px;
font-family: 'Oswald', sans-serif;
margin: 0 11px;
font-weight: 700;
margin: 5px 5px;
}
ul.yui-nav li a span { font-size: 16px; font-weight: 400; }
And here is the HTML...
<ul class="yui-nav">
<li>Preface</li>
<li>1<br/><span>Step</span></li>
<li>2<br/><span>Step</span></li>
<li>3<br/><span>Step</span></li>
<li>4<br/><span>Step</span></li>
<li>5<br/><span>Step</span></li>
<li>Submit</li>
</ul>
And here's a JS Fiddle with this all working (Don't mind the text not looking right)...
JS Fiddle
The problem I'm having is that when you hover over the circles, during the transition the border goes from a black square to the grey circle border. I just want a grey border to come out from the circle, and I don't understand why it's not happening correctly.
I'm not sure if i underestand your question. The problem is the black color from start the animation? You can fix it in the next lines:
...
ul.yui-nav li {
...
border-color:#ccc;
}
...
Is this correct?
Add border-radius: 50%; to your ul.yui-nav li selector. This tells it it's round even though it has no border.
Demo:
ul.yui-nav li {
border-radius: 50%;
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}