I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working.
Here's look like my button when i hover it
What i want is the border-color is red, and if the parent background-color is green the border-color is green
And here's my code
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
}
Here's my fiddle https://jsfiddle.net/evpsthx3/
Problem is your parent has no border color set. So just set the border color to the parent. Something like this: https://jsfiddle.net/evpsthx3/9/
<div class="parent red">
<a class="cta">BUTTON</a>
</div>
<div class="parent green">
<a class="cta">BUTTON</a>
</div>
.parent.red {
background-color: red;
border-color: red;
}
.parent.green {
background-color: green;
border-color: green;
}
You can give that effect by adding the below css code, Hope it wrks.
.cta:hover {box-shadow: #000 5px 5px 5px;}
you can try this one:
.parent {
width:300px;
height:60px;
padding:30px;
}
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
box-shadow: #242729 6px 6px 6px;
}
DEMO HERE
Related
I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great
Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.
You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>
Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}
Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>
.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>
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've created a "tag" shape using CSS (the rectangular base + triangle). Since I have more than one tag shape I wanted to add the hover property to the class which defines that shape and that way automatically attach hover to all tags. However, it appears its not working and the only way to apply hover is by id. Why is that? There surely must be an easier way to apply hover to several elements at once.Second question, since tag shape is built using two shapes, how should the hover color transition should be made?
JSfiddle
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: background 0.3s;
}
#q:hover{
background: green;
border-left:18px solid lightblue;
}
HTML:
<span class="pricetag-right" id="q">tag is here!</span>
DEMO PAGE
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#q:hover{
background: green;
}
#q:hover:after{
border-left-color:green;
}
You needed to set the transition of the :after to border and not background, since it's the border property being transitioned.
Here's a fiddle based on vsync's with class selectors:
https://jsfiddle.net/ajanini/9z3Lvp90/
.pricetag-right{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
.pricetag-right:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
.pricetag-right:hover{
background: green;
}
.pricetag-right:hover:after{
border-left-color:green;
}
I am trying following code for executing one alignment of boxes in right side with two adjacent box in row, please check below code why that main DIV class list_right css in not executing.
Fiddle link.
<style>
.list_right {
float:right;
padding:40px 5px 0px 0px;
width:37%;
position:relative;
}
.part_1 {
width:50%;
float:left;
line-height: 1.7;
}
.logos {
float: left;
width:160px;
margin-left:0px;
margin-bottom:8px;
padding-left: 45px;
padding-top: 1px;
padding-bottom: 3px;
text-decoration: none;
font-family:'Volkhov', arial;
font-size: 19px;
letter-spacing: 1.3px;
line-height: 2.14;
color: #6d6e71;
border: 1px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-color: #41c7ee;
behavior: url(/css/pie/PIE.htc);
}
.logos:hover {
border-color: #6d6e71;
background-color: #41c7ee !important;
color: #ffffff !important;
text-decoration: none !important;
}
.site_1 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
.site_2 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
</style>
<div class="list_right">
<div class="part_1">
Sites
</div>
<div class="part_1">
Sites
</div>
<div class="d_hidden">
</div>
<div class="clear_both">
</div>
Seems to me (from your code) that you are not closing the list_right tag. Close it and it should work properly... try to indent your code, make it look more clean, so that in the future you will be able to see the problems yourself.
You have <style> tags in your css in your original fiddle link which demonstrates the problem your were having.
Delete them, they shouldn't be there.
That's what's interfering with the list_right class.
FIDDLE
I have the following HTML:
<div id="pager">1
2
3<span class="elip">...</span>
4</div>
And CSS:
.elip
{
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a{
BORDER-BOTTOM: #E6E6E6 1px solid;
BORDER-TOP: #E6E6E6 1px solid;
BORDER-RIGHT: #E6E6E6 1px solid;
BORDER-LEFT: #E6E6E6 1px solid;
color: #585858;
padding: 7px;
padding-top:30px;
text-decoration: none;
color: #808080;
}
No matter what I do, I cannot get the '...' to be aligned down the bottom at the bottom. When testing in JSFiddle, all works, but not outside it as the shot below (red X is what it is, green tick is what I would like):
Padding, text size, alignment, line height, nothing seems to work.
Try this:
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
position:relative;
bottom:-10px;
}
You could use relative positioning, I also cleaned up your css a bit: http://jsfiddle.net/ptriek/LfUDB/2/
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a {
border: #E6E6E6 1px solid;
color: #808080;
padding:30px 7px 7px 7px;
text-decoration: none;
}
#pager span {
top: 9px;
position:relative;
}