How to use CSS to achieve a button text sliding effect

不言
Release: 2018-07-10 15:59:36
Original
2764 people have browsed it

This article mainly introduces how to use CSS to realize the special effect of a button text sliding. It has a certain reference value. Now I share it with you. Friends in need can refer to the source code download

Please download from github download.

https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects

Code interpretation

Define dom, define the text of the button in a container, each letter has a span, each span has a data-text attribute, its value is the same as the letter in the span:

<p class="box">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
</p>
Copy after login

The button is centered:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
Copy after login

Set the size and text style of the button:

.box {
    width: 200px;
    height: 60px;
    border: 2px solid black;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    font-family: sans-serif;
}
Copy after login

Each letter of the button is set as an inline block element so that the animation can be set individually:

.box span {
    display: inline-block;
    color: blue;
}
Copy after login

Stagger the letters Displayed outside the button container, the odd-numbered elements are displayed on top, and the even-numbered elements are displayed below:

.box span:nth-child(odd) {
    transform: translateY(-100%);
}

.box span:nth-child(even) {
    transform: translateY(100%);
}
Copy after login

Use pseudo elements to add a copy for each letter:

.box span::before {
    content: attr(data-text);
    position: absolute;
    color: red;
}
Copy after login

Let the pseudo elements The letters of the element are also staggered and positioned relative to their original elements:

.box span:nth-child(odd)::before {
    transform: translateY(100%);
}

.box span:nth-child(even)::before {
    transform: translateY(-100%);
}
Copy after login

Add a mouse-over style to the button and set the easing time to animate it:

.box:hover span {
    transform: translateY(0);
}

.box span {
    transition: 0.5s;
}
Copy after login

Finally, hide the container External content:

.box {
    overflow: hidden;
}
Copy after login

Done!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS3 to realize vertical text arrangement

Introduction to CSS to create striped background styles for web pages

The above is the detailed content of How to use CSS to achieve a button text sliding effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template