How can I do this animation?
I did it with outline-offset border on hover I don't know how to make the animation.
.orange-button {
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
border-radius: unset;
border: unset;
}
.orange-button:hover {
color: white;
background: #B18D3A;
outline: 2px solid #C09E50;
outline-offset: 2px;
}
<div class="button-container">
<button class="orange-button" type="button">Zxxx</button>
</div>
This should help you:
.orange-button { /*This is your basic style for your button*/
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
position: absolute;
border: none;
}
.orange-button:hover { /* This is your style of button on hover */
background: #B18D3A;
cursor: pointer;
}
.orange-button::before { /* This is the first line */
content: "";
position: absolute;
top: -4px; /* Starting at the top away from the button by 4px (2px of the thickness plus the 2px of the offset */
left: -4px; /* Starting at the left away from the button by 4px (2px of the thickness plus the 2px of the offset */
width: 0; /* The width and height are both 0 so it is not visible at the start */
height: 0;
background: transparent;
border: 2px solid transparent;
}
.orange-button:hover::before {
animation: animate 0.5s linear forwards; /* Animate the first line of the border by keyframe animate (bellow), the animation takes 5s , linear meaning it takes the same speed from start to finish */
}
#keyframes animate { /* Defining the animate keyframe for the first line */
0% {
width: 0; /* At 0% it starts with 0 width and 0 height (invisible) */
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {/* At 50% the line in the width of button should be 50% and also in the height of the button */
width: 50%;
height: 50%;
border-top-color: #C09E50;
border-right-color: transparent; /* Defining which borders should be visible since it's the first line it should only be the left and top */
border-bottom-color: transparent;
border-left-color: #C09E50;
}
100% { /* The same thing except you need to add 4px */
width: calc( 100% + 4px);
height: calc( 100% + 4px);
border-top-color: #C09E50;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #C09E50;
}
}
.orange-button::after { /* The same as before except it starts at the bottom right */
content: "";
position: absolute;
bottom: -4px;
right: -4px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.orange-button:hover::after {
animation: animates .5s linear forwards;
}
#keyframes animates {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 50%;
height: 50%;
border-top-color: transparent;
border-right-color: #C09E50;
border-bottom-color: #C09E50;
border-left-color: transparent;
}
100% {
width: calc( 100% + 4px);
height: calc( 100% + 4px);
border-top-color: transparent;
border-right-color: #C09E50;
border-bottom-color: #C09E50;
border-left-color: transparent;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button class="orange-button"> <!-- This is your button -->
Hi
</button>
</body>
</html>
Use this property:
.orange-button {
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
border-radius: unset;
outline: 1px solid transparent;
outline-offset: 50px;
transition: 0.2s all ease;
}
.orange-button:hover {
outline: 1px solid #B63A6B;
outline-offset: 0;
}
Related
I'm trying to have a round border around my radio button fade in upon hover. The issue I'm facing is the hover border is being painted on the inside of the button as well as the outside. I'd only like the border on the outside. Additionally, the fade in transition is not working. Some advice appreciated. Thank you.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
You can check this code snippet with some explanation
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
/*transition: 0.3s;*/
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 10%; /* Keeping margin only 10% */
padding: 10%; /* Increase the inner area for pushing the border out of the circle */
border-radius: 50%;
transition: 0.3s; /* Move your transition to here */
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
Transition in before
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
transition: 0.3s;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
I find it a bit hacky solution,
it might help.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
added animation and also the hover border is now outside only
input[type='radio'] {
/* add margin here of If you want */
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2); /* control thickens on border here */
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%; /* outside border*/
height: 100%; /* for outside border */
border-radius: 50%;
transition:.3s; /* for animation*/
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
Look My animation.
I made this for using a button for showing and hiding passwords.
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 175px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
/* .eye::before{
animation: slash infinite 5s;
} */
}
#keyframes slash{
from{width:1px;}
to{width:175px}
}
<div class="eye"></div>
look that...
I want to run the animation slash on .eye::after
when the .eye is :active
and also make it so until again click(that is once the eye is clicked draw a slash and make it show until the again click )
that is I want to trigger the slash animation on .eye::after when .eye:active is triggered only using css.
I've added an example, you don't need to use #keyframes and animation to animate this eye on click - just use transitions. Also, example works with :active pseudo-class as you use it in your example, but looks like you need to have it switch on click, that way just add and remove class .active on click and replace :active with .active in CSS
.eye{
margin: 50px;
color: black;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5;
transition: all 0.3s ease-in;
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: all 0.3s ease-in;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
.eye:active::after{
width: 175px;
background-color: rgb(174, 0, 0);
}
<div class="eye"></div>
you can achieve this by just simply adding one liner code of javascript i.e. classList.toggle()
const myfun = () => {
const eye = document.querySelector(".eye");
eye.classList.toggle('changed')
};
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: 1s;
}
.changed:after {
width: 175px;
transition: 1s;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="style.js"></script>
</head>
<body>
<div class="eye" onclick="myfun()"></div>
</body>
</html>
I have a span which contains ellipses and i want to show the content through tooltip, but the position of the tooltip isn't seem to adjust as i can't apply position relative to the parent (due to ellipses). Here's the code i've tried
.data-tooltip:hover:before{
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 82%;
left: 25%;
-webkit-transform: translate(-58%, 41.5%);
transform: translate(-58%, 51.5%);
}
.data-tooltip:hover:after{
content: attr(data-title);
padding: 6px 8px;
color: #fff;
text-align: left;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
min-height: 32px;
word-wrap: break-word;
position: absolute;
top: unset;
bottom: 75%;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
<span class="data-tooltip" data-tooltip="my tooltip">
ellipsed content
</span>
Here i am using 'before' for tooltip arrow and 'after' for tooltip content, but their positions doesn't seem to adjust either.
i have tried positioning my data-tooltip content relative, but due to overflow:hidden, the tooltip cuts outside the box.
An example below...
This code quoted from Chris Bracco. Please look at this article for detail.
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<p style="margin-top:50px">
<span data-tooltip="I’m the tooltip text.">I’m a span with a tooltip.</span>
</p>
Instead of
data-tooltip="my tooltip"
Your data-tooltip attribute should be data-title
That should work now.
My div has an animation on it's border when hovering.
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
}
div:hover {
animation: blink 750ms forwards;
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div></div>
<div></div>
<div></div>
The animation is works fine as expected but when I hover off the div, the animation brakes suddenly. I want to keep the animation complete even though the cursor is away.
I've tried to add the transition: border-color 300ms; on the div but still it behaves the same.
You can try this:
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
transition:1000s; /*block the change*/
}
div:hover {
animation: blink 750ms; /*remove forwards*/
/*Add the last state of the animation*/
border-left: 1px solid rgba(255,255,255,1);
border-right: 1px solid rgba(255,255,255,1);
/*---*/
transition:.5s; /*make the change fast on hover*/
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div></div>
<div></div>
<div></div>
UPDATE
To make sure the animation will end, you need to keep the hover state. An idea is to consider a pseudo-element that will cover all the screen to be sure you will keep the hover until the end:
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div.box {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
transition:1000s; /*block the change*/
position:relative;
}
div.box:hover {
animation: blink 750ms; /*remove forwards*/
/*Add the last state of the animation*/
border-left: 1px solid rgba(255,255,255,1);
border-right: 1px solid rgba(255,255,255,1);
/*---*/
transition:.5s; /*make the change fast on hover*/
}
div.box:hover:before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
animation:disappear 0.1s 0.75s forwards;
}
#keyframes disappear {
to {bottom:100%;}
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
With the help of CSS Triangle tutorial, I learnt to create triangle shapes.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
I'm trying to add a border to the triangle but I was unable to do it.
what I achieved:
Expected:(trying something similar border with gray)
Check this JSFiddle
Stuck up no where to start this. I tried outline, but none worked(I know it won't work).
Thanks for taking time to read my question.
Any help is appreciated.
Note: I'm trying this in CSS instead of using images.
When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options.
Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect.
.arrow-down {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}
<div class="arrow-down"></div>
.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}
Option 2: Rotating the element (which has the border hack to produce the triangle) and then adding a box-shadow to it.
.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
-ms-transform: rotate(225deg); /* IE 9 */
-webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(225deg);
transform: rotate(225deg);
box-shadow: 0px -3px 0px -1px #444;
}
<div class="arrow-down"></div>
.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
transform: rotate(225deg); /* browser prefixes added in snippet */
box-shadow: 0px -3px 0px -1px #444;
}
Tested in Chrome v24 and Safari v5.1.7. Should work in other CSS3 compatible browsers also.
The following options do not directly answer the question as it doesn't do a border within border but are others way of producing an arrow/triangle with a border.
Option 3: Using linear-gradients on an element, rotating it to produce the triangle and then adding a border to it using the normal border property.
.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
<div class="arrow-down"></div>
.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
transform: rotate(-45deg);
backface-visibility:hidden;
}
Option 4: Using a rotated pseudo-element (with background as the color of the triangle) to produce the triangle and then adding a normal border to it. The parent element's overflow is set to hidden and the pseudo-element is positioned appropriately so as to display only half of it (creating the illusion of a triangle).
.arrow-down {
position: relative;
height: 50px;
width: 50px;
overflow: hidden;
}
.arrow-down:before {
position: absolute;
content: '';
top: -webkit-calc(100% * -1.414 / 2);
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="arrow-down"></div>
.arrow-down:before {
position: absolute;
content: '';
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
transform: rotate(-45deg);
}
Try adding these lines to your CSS:
.arrow-down:before {
content: "";
display: block;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-top: 26px solid #0f0;
position: relative;
left: -26px;
top: -20px;
z-index: -1;
}
This will draw a 3px green border.
Check the result here: jsfiddle
Demo: http://jsfiddle.net/3fFM7/
.arrow {
border-bottom: 60px solid transparent;
border-left: 60px solid black;
border-top: 60px solid transparent;
height: 0;
margin-left: 50px;
width: 0;
behavior:url(-ms-transform.htc);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.arrow > div {
border-bottom: 59px solid transparent;
border-left: 59px solid red;
border-top: 59px solid transparent;
left: -60px;
position: relative;
top: -63px;
width: 0;
}
<div class="arrow"><div></div></div>
Play with transform rotate :)
Or:
DEMO: http://jsfiddle.net/tKY25/1/
<div class="triangle-with-shadow"></div>
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
transform: rotate(180deg);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: 0px -5px 0 0px rgba(0,0,0,100);
}