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.
Related
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;
}
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've been having trouble all day with these buttons. First, both buttons were on top of each other looking like this, http://i.imgur.com/wVmntpQ.jpg and now after posting here asking what to do, it looks like this now, http://imgur.com/OmXDQct
I was told to change in my css from this :
CSS:
button {
float:left;
margin-top:250px;
color:white;
display: block;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid white;
cursor: pointer;
}
button:hover {
background: black;
border: 1px solid black;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
I guess you just need to add position:relative to the div which contains the buttons, so make it like this:
HTML
<div style="position: relative;">
GO ROAM</br>
START HERE.
<button>SIGN UP</button>
<button>LOG IN</button>
</div>
Hope this will help you ...
Ok, here is the working code on jsfiddle. I have removed the absolute path from the buttons and added display: inline-block; so now they're one next to the other. I have also added the top: 250px declaration in the wrapper.
button {
color:white;
display: inline-block;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid white;
cursor: pointer;
}
button:hover {
background: black;
border: 1px solid black;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
Saw this image on dribbble. How would I create this effect in CSS? I'm referring to the two input fields being almost merged and having a not-full-width divider between them.
Something like this:
#inputwrap {
border: 1px solid #aaa;
background: #fff;
width: 180px;
padding: 10px;
margin: 20px;
}
#inputwrap input {
border: none;
width: 160px;
padding: 5px 10px;
outline: none;
}
#inputwrap input:first-child {
border-bottom: 1px solid #aaa;
}
http://jsfiddle.net/2tHfG/
I am trying to change the color of the selection around my textbox when a user is inputting data. Right now when the user selects it on my machine it becomes blue. I would like this to be red. Is it possible to change the color of the selection around a focused textbox? I tried using -moz-selection and selection in my css but it doesnt work.
#myTextBox {
border: 3px solid gray;/*background img not available, added border to see textbox*/
background: transparent url(IMAGEHERE.png);
width: 368px;
height: 33px;
color: silver;
font-size: 22px;
padding-left: 10px;
}
::-moz-selection {
background-color: #dd2020;
color: #fff;
}
::selection {
background-color: #dd2020;
color: #fff;
}
jsFiddle
Try this code:
#myTextBox {
border: 3px solid gray;
width: 368px;
height: 33px;
color: silver;
font-size: 22px;
padding-left: 10px;
border:2px solid red;
border-radius:7px;
font-size:20px;
padding:5px;
}
#myTextBox:focus{
outline:none;
border-color:blue;
box-shadow:0 0 10px blue;
}
DEMO
It changes red to blue on focus.