I have this button/speech bubble:
Code:
<div value="GO" id="go-div" class="bubble">
<input type="submit" value="GO" id="go-button" style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;" data-target="#search-results-page">
</div>
I have this styling, to change the little arrow colour, when hovering on the button:
#go-div.bubble:hover:after {
border-color: transparent #ffffff;
}
Which gives this effect when hovering over the bubble:
However, when I hover over the little arrow it doesn't cause the whole button to change color:
What is the css that selects the little arrow (.bubble:after) hover and effects the whole button (.button) to turn it white?
Here is the jsfiddle
You can apply your :hover style to the parent element and since :after is a child when you hover on the arrow it will trigger hover on parent.
#go-div:hover #go-button{
background: white;
}
.bubble
{
position: relative;
width: 250px;
height: 65px;
padding: 0px;
background: #ff8282;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ff8282;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -24px;
top: 50%;
}
#go-div.bubble:hover:after {
border-color: transparent #ffffff;
}
#go-button:hover {
text-decoration: none;
background-color:white;
color: brand-red
}
#go-button,
#go-div{
font: 200 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-radius: 6px;
height: 64px;
text-decoration: none;
width: 100%;
background-color: #ff8282;
padding: 12px;
border: 0px solid #fff;
color: #fff;
cursor: pointer;
}
#go-div:hover #go-button{
background: white;
}
<div value="GO" id="go-div" class="bubble">
<input type="submit" value="GO" id="go-button" style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;" data-target="#search-results-page">
</div>
You can't use .bubble:hover:after to select the entire bubble as shown below:
.bubble:hover:after .bubble {
background-color: #ffffff;
}
So, your only choice is to put the :hover on the parent element. This way both elements will be affected and no further action will be needed:
.bubble:hover > #go-button {
background: #ffffff;
}
You can check out an updated, working version of your jsFiddle here.
Related
I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks
Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.
I'm trying to create a continue button that shows a right pointing arrow in a hover state. I also want the arrow to be centered.
I've tried adding .icon-arrow-right:before {content: "&rarr";}
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "#";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I would like the arrow to be to the right of the button text in a hover state. I would also like the arrow to be centered with the button text.
Make your pseudo element into the triangle you desire:
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
This uses the awesome transparent border trick to make the element box appear as a triangle. Change the border widths to alter the size of the triangle, notice the border with color is twice as wide as the transparent sides. You can play with these values to nuance the triangle how you like.
I also changed how you are positioning the text in the button:
.btn {
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
border: 3px solid #fff;
}
By using line-height this way you can guarantee your text will be vertically centered in the button at any font-size.
Check out the full working example:
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I have vertically centered the arrow with top:50%;transform:translateY(-50%);. I removed the line-height and height CSS from the .btn pseudo element because they weren't needed. I have just used > for the arrow, but you can use something like fontawesome to get a nice icon.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
font-size: 125%;
color: #fff;
transition: all 0.3s;
left: 130%;
top:50%;
transform:translateY(-50%);
}
.icon-arrow-right:before {
content: ">";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
Just expanding on #BugsArePeopleToo 's answer, using borders ans transforms to keep the ">" shape the OP wanted.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "";
width: 0.5em;
height: 0.5em;
position:absolute;
top:50%;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I have created a toggle-button that is not working in the IE-browser. I have doubts regarding the web-kit appearance and the border.
Here is a working snippet of my code:
.contain {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
background: #d6d6d6;
border-radius: 20px;
margin: 10px;
}
.checkbox {
position: absolute;
width: 28px;
height: 28px;
-webkit-appearance: none;
background: white;
border: 1px solid;
border-radius: 50%;
top: -5px;
left: -10px;
outline: none;
}
.checkbox:checked {
left: 20px;
}
<label class="contain" >
<input type="checkbox" id="checkbox" class="checkbox" />
</label>
The border is fine in Chrome but in the Internet-Explorer the border-radius is not applied.
It appears that the problem is with the .checkbox element, you haven't specified a border color for it which might be why you aren't seeing the border.
You could add it at the end of the border property, like this:
.checkbox {
width: 28px;
height: 28px;
position: absolute;
top: -5px;
left: -10px;
-webkit-appearance: none;
border: 1px solid red;
border-radius: 50%;
outline: none;
background: white
}
Or you could split the border property into border-width, border-style and border-color properties, like this:
.checkbox {
width: 28px;
height: 28px;
position: absolute;
top: -5px;
left: -10px;
-webkit-appearance: none;
border-width: 1px;
border-style: solid;
border-color: red;
border-radius: 50%;
outline: none;
background: white
}
Another thing you could try to do is make the border thicker, by changing the border's width (1px) to 2px/3px.
Good luck.
just add
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
to the checkbox class
I am trying to create input fields that look like this
which is easy enough because I can add a white background to the label with some padding. The problem is when the field appears on a non-white background like this
Is there any way to accomplish this with a transparent background on the label?
https://jsfiddle.net/jgu61qaq/
<div class="floating-label bg-white">
<label>Label</label>
<input type="text" value="Something">
</div>
<div class="floating-label bg-gray">
<label>Label</label>
<input type="text" value="Something">
</div>
<style>
.floating-label {
padding: 20px;
position: relative;
font-family: Arial, sans-serif;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #eee;
}
input {
padding: 5px 10px;
font-size: 14px;
}
label {
font-size: 11px;
position: absolute;
top: 15px;
left: 25px;
background: #fff;
padding: 0 5px;
}
</style>
Maybe something like this?:
label {
position: relative;
top: -16px;
left: 46px;
z-index: 0;
}
label:before {
z-index: -1;
content: '';
display: block;
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: -1px;
}
https://jsfiddle.net/jgu61qaq/3/
I used :before selector to create a white 50% height of label element to hide the border
body{
background-color:#ececec;
}
fieldset{
padding: 0;
width: 0;
background-color: #FFF;
border: 1px solid gray;
}
fieldset input{
border:none;
margin-top:-10px;
height:25px;
background-color:transparent;
}
<fieldset>
<legend>Lorem Ipsum:</legend>
<input type="text">
</fieldset>
I'm creating my own version of Twitter Bootstrap radio buttons purely based on CSS. The visual feedback for selected radio button is based on input[type="radio"]:checked + span.
As the content of my "buttons" can vary, the width is dynamic. This causes problem aligning the button next to each other.
In my JSfiddle I've set fixed width of 50px. Removing this and the buttons are on top of each other.
Can anyone point me in the right direction of how I can accomplish this?
Here is my code:
//HTML
<div class="button-group binary" data-toggle="buttons-radio">
<div class="radio-wrapper">
<input type="radio" class="active" name="status" value="1" />
<span class="background">Yes</span>
</div>
<div class="radio-wrapper">
<input type="radio" class="inactive" name="status" value="0" checked="checked" />
<span class="background">No</span>
</div>
</div>
//CSS
.button-group{
/*display: table;*/
display: block;
}
.radio-wrapper {
/*display: table-cell; */
display: inline-block;
position: relative;
height: 28px;
margin: 0;
width: 50px; /* I want this to be dynamic */
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
position: absolute;
z-index: 100;
height: 100%;
padding: 0 5px;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
If you remove position: absolute from you background class, you will no longer need the width style:
jsFiddle
.button-group{
/*display: table;*/
display: block;
}
.radio-wrapper {
/*display: table-cell; */
display: inline-block;
position: relative;
height: 28px;
margin: 0;
/*width: 50px; not needed*/
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
z-index: 100;
height: 100%;
padding: 0 5px;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
Having a look at your CSS, I think the issue you are having is because you are making the .background position: absolute it is not taking up any space in its parent, so the parent doesn't really have any width, this is why you have to manually set it. Stripping out the absolute positioning for the .background and actually making it an element that takes up space will give the parent a width (which will be based on its content). Now as far as correcting the on top of each other issue, I would think some floating here would work. CSS is here (I also removed some unnecessary rules)
.radio-wrapper {
position: relative;
float:left;
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
height: 100%;
padding: .5em;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
As per example fiddle.
I did add a bit more padding that you had though so please feel free to adjust as required. I also like padding in ems so if your font changes in size the padding is always relative.