I'm looking for help on how to transition a single character on a button when the button itself is hovered over as seen below:
All my attempts so far have just resulted in the whole button shifting to the right rather than the single chevron.
Thanks
Well, it's easy, You have to use pseudo-element for it eg:
Note: Don't decrease width or instead of button will move instead of the animated thing
.button {
border-radius: 4px;
background-color: red;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
<button class="button"><span>Hover </span></button>
Related
I am new to coding, I have tried various solutions from similar questions asked, but nothing seems to work.
I have the following problem:
I made a breadcrumb, including various divs with :before and :after elements - shaping them like connected arrows.
The problem is, I made an animation for the breadcrumb element to fade-in-down. However, no matter in what combination I tried -> The :after element does not animate properly, or at all.
It kinda just pops up after :before and the parent div .breadcrumb have finished sliding in. Can anybody help me here, or has anyone maybe have aa clue?
... I have tried animating the :after element separatly, with transition, with animation-delay etc...nothing seems to work...everything slides in fine from top, excep the :after element, which just pops up ugly after the animation from my ".breadcrumb" is finished.
<div class="breadcrumb_wrapper">
Lasermaschinen
Serien
Unterserien
Produkt
.breadcrumb_wrapper {
position: fixed;
display: flex;
align-items: center;
width: 100%;
height: auto;
margin-top: 120px;
text-align: center;
}
.breadcrumb_element {
padding: 0 2rem 0 2rem;
width: auto;
line-height: 32px;
min-height: 32px;
max-height: 32px;
background: var(--Breadcrumb-gradient);
position: relative;
text-align: center;
margin-left: 0.5rem;
color: var(--nav-text-color-and-general-background);
cursor: pointer;
text-decoration: none;
animation: fade-in-down 0.5s ease-in-out;
}
.breadcrumb_element:before {
content: "";
position: absolute;
top: 4.69px;
left: -11.32px;
width: 22.427px;
height: 22.427px;
background: var(--nav-text-color-and-general-background);
transform: rotate(45deg);
z-index: 1;
border-top: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top-right-radius: 5px;
}
.breadcrumb_element:after {
content: "";
position: absolute;
top: 4.69px;
right: -11.6px;
width: 22.427px;
height: 22.427px;
background: var(--Breadcrumb-arrow-gradient);
transform: rotate(45deg);
z-index: 2;
border-top-right-radius: 5px;
animation: fade-in-down 0.5s ease-in-out;
}
#keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Without seeing your HTML code I just had to take a guess at how you need this but here is an example with the after pseudo element coming in from the top and sitting on top of the before pseudo. Hope this helps you get what you are looking for. You can have it come in from any direction that you want.
ul {
list-style: none;
display: flex;
overflow: hidden;
}
li {
margin-left: 20px;
margin-right: 20px;
position: relative;
}
li::before {
content: '';
width: 20px;
height: 20px;
background-color: green;
position: absolute;
right: -25px;
}
li::after {
content: '';
width: 20px;
height: 20px;
background-color: red;
position: absolute;
right: -25px;
top: -100px;
transition: all 1s;
}
li:hover:after {
top: 0;
}
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
Hie!
Transition doesn't work after animation with animation-fill-mode: forwards;
First animation fires and ends on hover, but then after unhovering transition doesn't apply.
Codepen here
It reproduces in chrome and safari. In firefox works fine.
pug:
button Button
scss:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 100%;
right: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
animation: nav-link-hover .25s forwards;
}
}
}
#keyframes nav-link-hover {
0% {
left: 0;
right: 100%;
}
100% {
left: 0;
right: 0;
}
}
UPDATE
I've found workaround but will wait for any answer and gladly accept it if it will be better or for example successfully uses broken keyframes.
Still don't know what's wrong with keyframes in chrome/safari, but have found simple workaround.
Now first 'before'-element is on right with no width right: 0; width: 0;.On hover it moves to left with 100% width, that begins to transitionally grow: left: 0; right: auto; width: 100%;.
Finally, when hover was lost, 'before' starts to decreasing, resting on the right end again.
New code:
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
Codepen
Animating elements require a defined state before the animation begins. If you define a state on a trigger (ie. hover), some unexpected behaviour may occur. Therefore, you should set your starting point before the hover.
In this case, simply move left: 0; from the hover to the "non-hover" properties of &:before
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
right: auto;
width: 100%;
}
}
}
This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here
<style>
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<button class="button">Home</button>
How to put link in button?
i tried everything codes available in google but still error in my website
i dont know whats the best code for this
thanks for someone who wants to teach me.
No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
I'll suggest to add anchor tag if you want to add link.
Home
Add link in "#". It'll work.
Four different possibilities to a button become a link (CSS isn't an option):
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
width: 120px;
text-align: center;
overflow: hidden;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
}
Javascript:<br>
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br>
Inner link:<br>
<button class="button">click</button><br><br>
Wrapper link:<br>
<button class="button">click</button><br><br>
Fake button:<br>
<a href="http://example.com" class=button>click</a>
Please try this:
<button class="button">Home</button>
I think its the easy way to do it.
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
a{
text-decoration:none;
}
<button class="button">Home</button>
You can have the link as a button this way
home
Or if you using a css library like bootstrap
home
I am using pure CSS based tooltip, but having display issue. The span box is hiding behind main boday and facebook like box which is in right sidebar. Below is the screenshot of the same.
Here is the tooltip CSS.
a.tooltip
{
position: relative;
display: inline-block;
}
a.tooltip span {
position: absolute;
width: 300px;
padding: 8px;
left: 50%;
font-size: 13px;
line-height: 16px;
margin-left: -160px;
text-align: justify;
visibility: hidden;
bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
opacity: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/** CSS Down Arrow **/
a.tooltip span:after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
a:hover.tooltip span {
opacity: 1;
visibility: visible;
bottom: 30px;
z-index: 100;
}
a.imgleft {
float: left;
margin: 0 15px 10px 0;
}
a.imgright {
float: right;
margin: 0 0 10px 15px;
}
a.imgleft span, a.imgright span {
bottom: 140px;
}
a:hover.imgleft span, a:hover.imgright span {
bottom: 130px;
}
/** Span Color **/
a.ttblue {
color: #E45742;
}
a.ttblue span {
background: #E45742;
border: 4px solid #E45742;
color: #FFF;
}
a.ttblue span:after {
border-top: 10px solid #E45742;
}
any help will be greatly appreciated! Thanks
I believe we had to see more of your pages html to be able to help you.
However, the only problem I can imagine is .tooltip being in a different stacking context than right sidebar's.
Does any of .tooltip's parents/grandparents have a z-index or an opacity level set on it? It might be an opacity level. If it is, set a positive z-index on it (or if sidebar has a z-index too, a higher one than sidebar's).