Below is my code. I'm going for a text changing effect when I hover onto a search button. I'm keeping the button background the same and just trying to change the color of the text when hovering. I'm not sure what i'm missing. Is there an easier way to achieve this? The button just stays the pre-hover colors. I'm out of ideas.
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
{{ trans_fast }}
.header_search #search-submit:hover {
background: #ff9105;
color: white
}
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* dont know about this "{{ trans_fast }}" */
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
After editing here, it should look okay, the trans_fast is a very unknown concept to me. Some of your css properties were vertical and some were horizontal. Try one or the other but not both at the same time for syntax purposes. PLUS (you forgot the semicolon for color)
Add ; and the end of color: white
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
Related
I somehow managed to make the input box responsive but the button is not being aligned in center
here is the css code
.webdesigntuts-workshop button {
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 2px 0 #000;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
font-family: "Cabin", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 20px;
padding: 0 10px;
padding-bottom: 2px;
text-shadow: 0 -1px 0 #000;
display: inline-block;
width:100%;
max-width:120px;
float:center;
}
Here is the whole Codepen link
https://codepen.io/anon/pen/XZrqzZ
Your code is messy, to much, in fact. Yet, the problem is not the button, but the input. The margins in the input is pushing it out of the screen because you have the width to 100%. So, the input take 100% of the screen plus the margin, pushing it out of the layout intended.
Try this in your css:
.webdesigntuts-workshop input{
margin: 0; /* Put 0 */
width: 100%;
}
.webdesigntuts-workshop button {
margin: 0 auto; /* Add this */
}
I really doubt what I am asking is possible but it's still worth a try.
I am trying to create a button that normally has background-color: transparent; color: white; and when you hover over it, those properties should swap. The problem is that if you just swap them then all you see is a white button. If you know the background colour of the containing element then you can get the colour from there but If the button is over an image or a canvas then this won't work.
This is how I've been doing it so far
html,
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
UPDATE
It seems that quite a few people were confused by the question. I am asking if there is a way to do the exact same thing I've done above but on top of an image or a canvas (instead of a solid colour). See example below
html,
body {
height: 100%;
}
#container {
background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
Yes, it IS possible in CSS with mix-blend-mode.
Answer's update in April 2021: Currently it have a very solid support (95% globally) although Safari doesn't have hue, saturation, color, and luminosity blend modes. Of course, IE isn't a considerable thing if you expect to use it (like many of other cool CSS features of the last years).
.ghost-button {
/* Important part */
mix-blend-mode: screen;
background: #000;
color: #fff;
/* Button cosmetics */
border: .125em solid #fff;
font: 2em/1 Cursive;
letter-spacing: 1px;
outline: none !important;
transition: all .8s;
padding: .5em 1em;
cursor: pointer;
}
.ghost-button:hover {
/* Important part */
background: #fff;
color: #000;
}
#container {
background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;
/* Also works with background-color or gradients: */
/* background: linear-gradient(to right, red, yellow); */
/* Container positioning */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
html, body {
margin: 0;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
As you can see, the secret here is using mix-blend-mode: screen along with the black color for the "erased" part, since black is mixed with the background when using this screen mode.
No, it isn't possible in CSS! You could try to set the color with JS to mimic this effect.
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: none;
color: red;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
hover color is set to red you can update it.
I'm trying to recreate this image in CSS.
This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?
h4 {
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
background: white;
box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}
<h4>3. Scouting for a location</h4>
You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
position: relative; /* new */
}
/* new */
.border:after {
content: "";
position: absolute;
display: block;
background: inherit;
border-radius: inherit;
border: inherit;
left: 2px;
top: 2px;
width: 100%;
height: 100%;
z-index: -1;
}
<div class="border">3. Scouting for a location</div>
The concept behind using box-shadow is that two shadows, one white and one black, overlap to simulate a second black border. But the black shadow is only visible in the direction from which it is offset from the white shadow, so a gap is apparent between the original border and the black shadow (as shown in the OP's original post).
The "spread radius" of the black shadow could be utilized to eliminate this gap (cleverly demonstrated by Nirav Joshi), but then the curvature of the corners is amplified and the two borders look different.
To duplicate the original border, I'd use ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like Vadim Ovchinnikov's idea of inheriting the border color and radius from the original element.
.border {
position: relative;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
}
.border::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
border: solid 3px black;
border-radius: 5px;
z-index: -1;
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>
Try this example
Hope it will help you.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
}
<div class="border">Title</div>
EDIT
Here now you can see that i made box-shadow to 3px and no longer right side corner.
Use an absolute positioned ::after or ::before pseudo element and have its z-index lower than the element itself.
Good evening! I just wanna to change my scroll like this.
So it looks like that track is hidden. I got my style like this
::-webkit-scrollbar{
width: 15px;
height: 40px;
}
::-webkit-scrollbar-thumb{
background-color: #DBDBDB;
border: 4px solid transparent;
border-radius: 11px;
background-clip: content-box;
}
::-webkit-scrollbar * {
background: transparent;
}
::-webkit-scrollbar-thumb:vertical {
height: 90px;
}
And I got such result:
So there is a question. How can I do this with CSS or JS maybe.
Thanks
I think this might work:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(,0,0,0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
You might have to edit it according to your need.
here to save the day, you must first add overflow: overlay; to your body tag, works the same as overflow: auto; but it will be on top of the content instead of on its side.
then just add this:
*::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid transparent;
background-color: rgba(0,0,0,0.3);
background-clip: content-box;
}
and adjust the color and the width to your liking, your welcome!
I am trying to add a background image to a button (or link with the same class) which already has a background color.
Here is the jsfiddle: http://jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
.button {
padding: 10px;
margin-right: 8px;
margin-bottom: 10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height: 1em;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity: 0.9;
filter: alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>
How can I get that background image to show?
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-color defined for .button_blue can be applied on cascade
.button {
background: url(http://i47.tinypic.com/2ni0ahd.png);
background-repeat: 3px 5px no-repeat;
}