Sliding link background

in #steempress • 5 years ago


As we can animate width smoothly in CSS, creating a sliding background animation on a link is a breeze, please see below:


Example

Button

HTML

<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/
#code #photography #html #css
5 years ago in #steempress by
$0.41
5 votes
Reply 2
Sort:  
  • Trending
    • [-]
     5 years ago  

    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

    [-]
     5 years ago  

    Congratulations @baillieogrady! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

    You distributed more than 50 upvotes. Your next target is to reach 100 upvotes.

    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 STOP

    Do not miss the last post from @steemitboard:

    The new SteemFest⁴ badge is ready
    Vote for @Steemitboard as a witness to get one more award and increased upvotes!
    $0.00
      Reply