Sliding link background
As we can animate width smoothly in CSS, creating a sliding background animation on a link is a breeze, please see below:
Example
ButtonHTML
<a href="#" class="button-slide">Button</a>CSS
.button-slide {
display: inline-block;
text-decoration: none;
padding: 1em 1.5em;
background: none;
color: #000;
font-weight: bold;
position: relative;
transition: color 0.25s ease;
border: 3px solid #000;
}
.button-slide:hover {
color: #fff;
}
.button-slide::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #000;
transition: width 0.2s ease;
z-index: -1;
}
.button-slide:hover::after {
width: 100%;
}
Original Article: https://baillieogrady.com/sliding-link-background/
Source
You have posted an image in an curated and/or artistic tag (photography, art, etc.) without attribution or source, and/or you have stated to be the author of the image. By doing so you are claiming to be the content creator. The image you posted is the primary source of value for your post.
Plagiarism is the copying & pasting of others work without giving credit to the original author or artist.
Repeated plagiarism or tag abuse is considered spam. Spam is discouraged by the community and may result in action from the cheetah bot.
More information on Image Plagiarism
More information on artistic tags
If you believe this comment is in error, please contact us in #disputes on Discord
Congratulations @baillieogrady! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard:
Vote for @Steemitboard as a witness to get one more award and increased upvotes!