How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
Related
I'm trying to remove the yellow outline with outline: none but it's not working. I tried to put the property on every action, but with no success. Any ideas on why is not working?
.save {
background-color: #99aab5;
color: black;
text-align: center;
font-family: 'Comic Neue', cursive;
font-size: 24px;
width: 125px;
border: 1px solid #ffffff;
border-radius: 4px;
cursor: pointer;
transition: .3s;
box-shadow: 1px 4px 2px #fff;
position: absolute;
bottom: 13rem;
right: 2.7rem;
outline: none;
}
.save:hover {
color: azure;
}
.save:active {
transform: translateY(4px);
box-shadow: 0px 2px 1px;
outline: none;
}
<button type="button" class="save">Save</button>
It might not be an outline. In my experience, it can be a border or even a box shadow.
Try using this:
button{
border: none;
outline: none;
box-shadow: none;
}
if this does not work then you have to check the Chrome dev console in the element tab to see which style is causing the yellow outline.
I just leanred CSS and try to doing some tutorials.
I have a button with this CSS
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
I just want button just change the color, and remove the border while i hover it.
But the result is just like this:
image of the result
I've googled it, but got stuck because the result i got just another tutorial how to make my button move, not to make it doesn't move.
Sorry for my bad english. Thanks in advance!
Edit: After i try to make another button, this is because of border: none; that makes my button move slightly. Is it any other way to make border away but the button doesn't move?
this is happening because you are removing the border. Instead of removing it, make it the same color as the background.
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
Or, if you want the border to really disappear, use transparent:
.button:hover {
background: red;
border-color: transparent;
}
see below code, on .btn:hover you can write your css
.btn:hover {
background-color: red;
color: #fff;
}
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
display: inline-block;
background-color: #fff;
border: 1px solid red;
}
.btn:hover {
background-color: red;
color: #fff;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
<div class="btn">one</div>
<div class="btn">two</div>
I am making a modal view, using bootstrap framework, as shown in the figure , these are two buttons , I want hover effect when , mouse points on, using CSS but it isn't working,
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut :hover{
background: #fff;
border: 1px solid #fff;
}
#nobut :hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
enter image description here
#yesbut :hover{ /*Remove the space*/
background: #fff;
border: 1px solid #fff;
}
You got error in selectors corrected is:
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
without space between #yesbut/#yesno and :hover.
Space mean you are targeting elements inside that particular element e.g. children of #yesbut.
You need to remove the spaces. If you put a space before the pseudo-class it means that you want to select a child of e.g. #yesbut instead of the element itself.
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
#nobut:hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
I have two buttons, that I would like to have one on top, and one on the button of each other, how ever when I went to see how they looked, both buttons were inside of each other, I Cant seem to find the issue, but here's my code.
CSS
body { font-size: 16px; width: 600px; margin: 25px auto; }
button {
color:white;
display: inline;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid black;
cursor: pointer;
}
button:hover {
background: #f7f7f7;
border: 1px solid #8b8b8b;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
Currently the buttons show side by side: see this fiddle.
If you want the next button on a new line, then use display:block see this fiddle.
So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
DEMO
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
you can do
#signUpBox:hover h3 {
color: #000;
}
JSFIDDLE
change text color using color property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
Fiddle