I created a button:
http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN
My css so far is:
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
}
My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:
When hovering out, the button shall transit to its original shape.
Is this something that can be achieved with CSS or is jQuery needed?
Working example
jsfiddle
EDIT, now with transition
jsfiddle
EDIT, now with transition on mouseout
jsfiddle
HTML
login
CSS
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
position:relative;
}
.button:after {
content: " ";
border: solid transparent;
border-width: 0;
border-left-color: orange;
position: absolute;
-webkit-transition: all 1s ease;
left: 100%;
top: 50%;
}
.button:hover:after {
content: " ";
display:block;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-left-color: orange;
border-width: 25px;
margin-top: -25px;
margin-left: -10px;
}
Can't make that with css or jQuery (unless i don't know some plugin).
Basically you must have two images. One for normal button, one for arrow shaped button. And onNover just change background image using background transition. But i think it will look ugly.
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I want to create an html link that has this form:
when that link is hovered or focused that form should change its color.
The text in the link should be in the center of the link, normally that would mean display: block.
this mustn't have problems with using the same way to create a link the other direction in the same row. (I had problems with this when I used a technique with position: relative)
What I have already tried:
making a normal row and then fixing divs with height:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;, for the other direction the opposite way, but the two divs above the row didn't appeared in the same height.
making the triangles in the left not changing color when hovered or focused, but I didn't like that.
instead of using the border-hack with position: relative I used floats to fix them. This didn't worked when I also wanted to have the linktext vertically centered.
You can achieve the shape using pseudo elements like :before and :after
.box {
display: block;
position: relative;
width: 100px;
height: 50px;
background: #000;
margin-left: 20px;
color: #fff;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
cursor: pointer;
}
.box:after {
content: '';
position: absolute;
height: 0;
width: 0;
border: 25px solid transparent;
border-right: 25px solid #000;
left: -50px;
transition: all 0.5s ease;
}
.box:hover {
background: #eee;
color: #000;
}
.box:hover::after {
border-right: 25px solid #eee;
}
<a class='box'>Demo Link</a>
Goal: Make nice effect of hovering buttons in pure CSS, which will use ::after and ::before pseudo-elements. Look at this jsFiddle example to see, what I want to reach.
Code: Button will have some styling, also an background-color, which is turned off in this example.
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
}
Problem: I want to use background-color and when I enable it, then I can't see pseudo-elements. It is like that, because these pseudo-elements have z-index: -1;, which put them behind the background. When I change z-index to 0 or 1, then text is not visible.
What I can't do: I can't add new elements inside buttons (like spans), because this is one already running website and client decided to change the behavior of buttons, so here I am. There are tons of buttons in this website, so this is the reason, why I want to find solution with pseudo-elements, because trying to find every single button and change them would be inappropriate.
If i understood you well, this is what you are looking for:
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
border:1px solid;
}
a.button:before {
content: " ";
display: block;
z-index: -1;
position: absolute;
height: 0%;
top: 0;
right: 0;
left: 0;
background: #ddd;
transition: height 0.2s ease;
}
a.button:hover:before {
height:100%;
}
TEST
Consider an alternative method of doing the background colour transition thing.
As seen in this edited demo:
/* remove all references to .button::before */
.button {
background-image: linear-gradient(to bottom,
transparent, transparent 100%,
red 100%, red);
transition: background-image 0.5s ease 0s;
}
/* the "gradient" above has the practical result of being fully transparent,
but it has been carefully crafted so that the transition gives the desired result */
.button:hover {
background-image: linear-gradient(to bottom,
transparent, transparent 0%,
red 0%, red);
}
You can transition gadients, and in this case it is done stop-by-stop. The first and last stops don't change, but the middle two transition from 100% to 0%, essentially meaning that the cut-off point between transparent and red slides from the bottom to the top of the button, giving the effect you want.
You can now replace transparent with your desired background colour.
* You may need to remove the z-index:-1 from the ::after element to get the border effect back.
You can do something like,
HTML
CSS
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
text-decoration: none;
color: black;
z-index: 0;
background-color: white;
width: 50px;
}
.button::before, .button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
content: "TEST";
height: 50%;
width: 72px;
text-align: center;
z-index: 2;
line-height: 0.2;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
z-index: 1;
}
.button:hover::before {
height: 100%;
}
Example: https://jsfiddle.net/LL0f7rwp/6/
Some values are hard coded, but hope you can get an idea out of it :)
It's because z-index: -1 and background-color: white will push your :before and :after elements beneath.
Remove z-index: -1 from :after and :before and add to hover .button:hover::before
Make the background-color: transparent while hovering. Updated fiddle.
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
background-color: white;
text-decoration: none;
color: black;
}
.button::before,
.button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
height: 50%;
border: 4px solid red;
border-top: 0;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
}
.button:hover::before {
height: 100%;
z-index: -1;
}
.button:hover {
background-color: transparent;
}
TEST
I have this element with this style added:
.checkout-step.current .number {
background-color: #d26d51;
outline: 1px solid #d26d51;
outline-offset: 4px;
}
But I not want square corners in the outline, I want round the corners, like this example:
How can I do this?
My approach is as follows. Please check JSFiddle.
I have added following HTML.
2
I have added following css.
a {
background: #999;
width: 40px;
height: 40px;
border-radius: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
line-height: 40px;
position: relative;
border: 2px solid #000;
text-align: center;
}
a:after {
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 30px;
border: 2px solid #f00;
}
Use border-radius property to do this.
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
**use this code **
outline we cant use radius property Instead of outline make as border and radius so i changed code like this Try This .
Html
<div class="usecode"><div class=".checkout-step.current .number">2</div></div>
css
.checkout-step.current .number {
background-color: #d26d51;
margin:15px;
}
.usecode
{
border:1px solid #d26d51;
border-radius:25px !important;
}
Please check this Fiddle:
http://jsfiddle.net/5WGLs/
If you hover over basker-holder, you can see that it's child-> shopping-cart top border is not behind it's parent. It should be white. The effect I am looking for is this:
http://i.stack.imgur.com/XBV82.png
Simply add position: relative;, background-color: #fff; and z-index: 2000; to .cart-btn.This way, .cart-btn will be over .shopping-cart and the background-color will hide to border-top.
View exemple: http://jsfiddle.net/5WGLs/3/
Hope this help.
You could use z-index. Demo
But you should read What No One Told You About Z-Index, because using such large z-indices is useless.
jsfiddle DEMO
Playing with the z-index and background; we can acheive that
edited css
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}