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;
}
Related
I can't change border color when the input field is active. I tried using input:active, input:focus. What I want is the color of input's border to change when user clicks on it.
The CSS code :
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active {
font-size: 13px;
border: 2px solid Red;
background-color: #ffffff;
}
&:disabled {
border: 1px #Black;
border-radius: 0px;
background-color: #F9FAFB;
}
HTML Code:
<div class="container">
<form>
<label for="input-field">Text</label>
<input type="text" placeholder="...">
<button>..</button>
</form>
</div>
So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.
Example in scss:
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active, &:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
&:disabled {
border: 1px solid black; // update this
border-radius: 0px;
background-color: #F9FAFB;
}
}
In css:
input:active, input:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
You can't use the & in regular css.
#Black isn't a css colour value.
You need outline: none to override the browser's default focus behaviour.
I'm practicing HTML and CSS at the moment and making webpage from a PSD-template, it's going good so far, but I'm facing the following problem:
The problem is that border disappears after being clicked on and :focus doesn't seem to handle the issue. I need the border to be present until i click on another element, can it be done with CSS? If yes (and that's probably the answer), then how? If it has a JS solution, I'd be glad if you help me with that.
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="Images/phone_img.png">
<p>Responsive</p>
<p>Websites</p>
</div>
</div>
div:focus Won't work by default, unless the div has a tabindex attribute.
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
From W3Schools.
It also enables focus functionality to the element, so if you want your div to have focusing abilities, just add this attribute: tabindex="0".
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon" tabindex="0">
<img src="https://via.placeholder.com/150">
<p>Responsive
<p>Websites</p>
</p>
</div>
</div>
It also adds an outline when focused, which you may disable using outline: 0;.
i made with jquery.
$(document).ready(function(){
$('.icons_and_text').click(function(){
$('.icon').toggleClass("new");
})
});
.icons_and_text{
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon{
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover{
cursor: pointer;
}
.icon:active{
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus{
border: 3px solid #dedede;
border-bottom: white;
}
.new{
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="https://picsum.photos/500/200">
<p>Responsive <p>Websites</p></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
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.
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/