0% found this document useful (0 votes)

73 views275 pages

Creative Transitions Animations Css

Uploaded by

heindrey77

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

73 views275 pages

Creative Transitions Animations Css

Uploaded by

heindrey77

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 275

Creative transitions and animations in CSS

Your practical guide to creating transitions and animations on HTML elements

Andres Cruz Yoris

This version was published: 2022-12-13

Tweet about the book!
Please help promote this book.
The suggested tweet for this book is:
I just bought the book "Creative CSS Transitions and Animations" by @LibreDesarrollo!

Get your copy at:

https://www.desarrollolibre.net/libros/transiciones-animaciones-creativas-css
About the Author
This book was prepared by Andrés Cruz Yoris, Bachelor of Computer Science, with more than 10 years of
experience in the development of web applications in general; I work with PHP, Python and client side
technologies like HTML, JavaScript, CSS, Vue among others; and server-side like Laravel, Flask, Django, and
CodeIgniter. I am also a developer in Android Studio, xCode and Flutter for the creation of native applications for
Android and IOS.

I put at your disposal part of my learning, reflected in each of the words that make up this book, my tenth book on
web development, but the first book on web development with HTML and CSS; with which, I took my first steps in
the world of web creation.
Copyright
No part of this book may be reproduced or transmitted in any way; that is, electronically or by photocopies without
the permission of the author.
Foreword
With CSS or in Spanish, Cascading Style Sheets (from English Cascading Style Sheets) is the language of styles
used to describe the presentation of HTML documents; with CSS it is described how any element defined in the
HTML should be rendered; this includes the introduction of animations and transitions to make colorful effects of
all kinds where the only limit is the imagination.

In this book, we'll look at a number of creative examples using CSS and a bit of HTML; with this, we will apply
animations and/or transitions with CSS; to obtain the desired effect; they are highly customizable exercises and
therefore you can modify and customize the examples to your liking and use them in real projects.
Who is this book for
This book is for anyone who wants to experiment with CSS, do some exercises, and get their imaginations going
for really cool effects.

For those people who want to learn something new.

For people who want to improve a skill in web development and who want to grow as a developer and who want
to continue scaling their path in web development as CSS is a fundamental technology to present HTML elements
in a clear and pleasing way.

For those people who know CSS and want to improve the use of animations and transitions.
Considerations
Remember that when you see the $ symbol it is to indicate commands in the terminal; you don't have to write this
symbol in your terminal, it is a convention that helps to know that you are executing a command.

At the end of each chapter, you have the link to the source code so you can compare it with your code.

The use of bold in paragraphs has two functions:

1. If we put a letter in bold it is to highlight some code such as names of variables, tables or similar.
2. Highlight important parts or ideas.

To display tips we use the following layout:

important tips

For the code snippets:

body{
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

When using the * or //*

It means that we are indicating that there are fragments in the code that we presented previously.

As a recommendation, use Visual Studio Code as an editor, since it is an excellent editor, with many
customization options, extensions, intuitive, lightweight, and that you can develop on a lot of platforms,
technologies, frameworks, and programming languages; so all in all Visual Studio Code will be a great companion
for you; but if you prefer other editors like Sublime Text, PHPStorm or similar, you can use it without any problem.

https://code.visualstudio.com/

As a web browser, I recommend Google Chrome, which is a browser with good CSS support and easy to use, but
you can use any other browser in case Google Chrome is not to your liking.

https://www.google.com/intl/es/chrome/
Errata and comments
If you have any questions, recommendations or found any errors, you can let me know at the following link:

https://www.desarrollolibre.net/contacto/create

By my email:

desarrollolibre.net@gmail.com

Or on Discord in the HTML, CSS and JS channel:

https://discord.gg/sg85Zgwz96

As a recommendation, before reporting a possible problem, check the version you are referring to and add it in
your comment; it is found on the second page of the book.
Introduction
This guide is intended to carry out experiments or exercises with transitions and animations in CSS, applied to
buttons, images, texts and more complete HTML elements; we will see the most basic approach to animations in
CSS which would be using transitions, we will see multiple examples and limitations that we have when working
with the simplest way to obtain animations in CSS which is the use of transitions. In later chapters we will also
work with animations, we will learn about it characteristics, possible configurations, options and modes and with
this, we will see a more comprehensive approach to achieving animation in CSS.

In this book, we will see more than 100 complete and functional examples of animating HTML elements, we will
start by applying CSS transitions on buttons, texts, among others, to get to the animations in which we will create
experiments from scratch, adapt the ones we use with transitions, and we will use the transitions and animations
together.

This is a book to experiment with CSS animations, with this we are going to mention the following:
1. It is not a book that aims to know 100% CSS animations, if not, in a basic/intermediate way; The objective
is to experiment and with this, present different templates that we can use to create all kinds of more
complex or simply different animations.
2. It is assumed that the reader has at least basic knowledge in the use of CSS.

Compared to other books, the approach is mostly hands-on, presenting over 100 experiments to work through
and get inspiration for other types of CSS effects.

To follow this book you need to have a computer running Windows, Linux, or MacOS.
Map
This book has a total of 5 chapters, it is recommended that you read in the order in which they are arranged and
as we explain the experiments carried out, go directly to practice, replicate, test and modify the codes that we
show in this book.

Chapter 1: In this chapter we are going to review geometric transformations, translations and animations in CSS.

Chapter 2: In this chapter, we are going to create many examples of CSS transitions applied to buttons, in these
examples we will mainly apply geometric transformations, but we will also work with other CSS properties.

Chapter 3: In this chapter, we are going to present different examples of CSS effects with the hover event; that is,
we will continue using the CSS transitions as we did in the previous chapter; for these examples, we'll use any
kind of HTML structure that won't be buttons like in the previous chapter.

Chapter 4: In this chapter, we will create various effects using transitions, also, we will see the limitations through
several examples that we will analyze in the next chapter using animations to obtain more complete animations.

Chapter 5: In this chapter, we will present the use of animations, based on examples, we will see its possible
variants, configurations and examples using animations and transitions alike.
Table of Contents
Creative transitions and animations in CSS 1

Tweet about the book! 3

About the Author 4

Chapter 1: Basic Transitions and Transformations 1

Transitions 1
2D transformations 5
Transition 9
Rotation 10
Scale 11
Skew 12

Chapter 2: Transitions and translations on buttons 16

First effect 16
Apply translations in the extra container 18
Variations 20
Second effect 22
Third effect 25
Fourth effect 27
Fifth effect 28
Sixth effect 31
Seventh effect 34
Eighth effect 38
Ninth effect 40
Tenth effect 42
Eleventh effect 44
Twelfth effect 46
Thirteenth effect 48
Fourteenth effect 51
Fifteenth effect 53
Sixteenth effect 56
Seventeenth effect 59
Variation 61
Eighteenth effect 62
Nineteenth effect 66
Twentieth effect 67
Twenty first effect 69
Twenty second effect 71
Variants 73
Twenty-third effect 73
Variants 75
Twenty-fourth effect 76
Twenty fifth effect 77
Twenty-sixth effect 80
Twenty-seventh effect 82
Twenty-eighth effect 86
Variants 89
Twenty-ninth effect 90
Thirtieth effect 92
Variants 96
Thirty first effect 96
Variants 100
Thirty second effect 100
Variants 102
Thirty-third effect 103
Thirty-fourth effect 105
Thirty-fifth effect 107
Variants 109
Thirty-sixth effect 110
Thirty-seventh effect 115
Variants 117
Thirty-eighth effect 120
Thirty-ninth effect 122
Variants 124
Fortieth effect 125
Variants 127
Forty-first effect 129
Variants 130
Forty second effect 133
Variants 136
Forty-third effect 138
Variants 140
Forty-fourth effect 140
Forty-fifth effect 142
Forty-sixth effect 145
Variants 147
Forty-seventh effect 148
Variants 151
Forty-eighth effect 155
Forty-ninth effect 158
fiftieth effect 160
Variants 162
Chapter 3: Transitions and translations on images 164
First effect 164
Second effect 167
Hover effect: Geometric transformations 170
Hover effect: Extra containers 171

Chapter 4: Various effects with CSS, transitions and filters 174

First effect: Filled Text 174
Variants 175
Second effect: Smoke Text 176
Variants 179
Third effect: Menu 180
Fourth effect: Gradient text 183
Fifth effect: Text multiplied 186
Sixth effect: Neon Text 188
Seven effect: Bounce text 190

Chapter 5: Creative animations 195

First effect: Gradient text 195
Second effect: Path 197
Shadow 202
Third effect: Multiplied text 204
Fourth effect: Rotating Text 207
Shadow 209
Fifth effect: Rotating text 212
Sixth effect: Rotary button 214
Seventh effect: Extendable button 216
Eighth effect: Light text 220
Ninth effect: Button overlay 223
Tenth effect: Ripple 226
Eleventh effect: Sliding bottom 229
Twelfth effect: Loading 1 232
Variant 234
Thirteenth Effect: Jump 235
Fourteenth effect: Pulse 238
Increase 241
Fifteenth effect: Rotating edge 243
Sixteen effect : Filled Text 246
Seventeenth effect: Change background color 248
Eighteenth effect: Loading 2 249
Nineteenth effect: Loading 3 252
Variants 255
Twentieth effect: Loading 4 256
Chapter 1: Basic Transitions and Transformations
In this chapter, we are going to make an introduction to transitions and geometric transformations in CSS, which is
essential for the following chapters to present the different experiments that we are going to carry out with this
technology.

Transitions
Let's start by looking at the term "transition"; CSS transitions provide a way to animate changes to some CSS
properties; with this, we can prevent changes from taking effect instantly or abruptly; using transitions in CSS we
can soften sudden changes in style so that they are carried out smoothly.

Although the terms CSS transition and CSS animation offer us different schemes for making smooth changes
between one state and another, we will use the terms "transition" and "animation" interchangeably in this chapter
when referring to these smooth changes. between states.

Let's see an example; let's start by defining a basic CSS to convert a link to a button:

<!DOCTYPE html>
<html lang="es">

<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>
<style>
body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #111;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
background: red;
}
</style>
1
</head>

<body>
<a href="#">Button</a>
</body>

</html>

We have different events with which the user can interact, such as focus or hover; let's define a background color
change:

a:hover{
background: blue;
}
a:focus{
background: blue;
}

And it is precisely on these events in which the user can interact that we can apply the transitions in CSS.

If we go to the browser and position the cursor over the button, we will see that the color change occurs abruptly
and without any smoothness:

We can improve this by introducing transitions, so that the color change is progressive; for this, we must use the
transition property in its multiple options; in this example, when wanting to change the background color of the
button, it would be the transition-property indicating which property we want to affect:

transition-property: background;

Also, we must indicate the transition time using the transition-duration property, for this, we can express it in
time units, such as milliseconds or seconds:

transition-duration: 1s;

Our example would look like this:

a {
2
text-decoration: none;
color: #111;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
background: red;
border-radius: 3px;
transition-property: background;
transition-duration: 1s;
}

With this, we are indicating that we want to animate the background property and that the transition time is one
second (remember that you can specify more time, 3 seconds -3s- 200 milliseconds -200ms- etc); finally, we will
have a smooth change like the following:

Remember that you can use other events like focus.

A unified, equivalent and more comfortable way of using the previous transition properties would be the following:

a {
text-decoration: none;
color: #111;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
background: red;
/* transition-property: background;
transition-duration: 1s; */
transition: background 1s;
}

This is the format we use throughout the book.

Now, what happens if we want to animate another property, for example, the border-radius property:

a {
text-decoration: none;
3
color: #111;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
background: red;
border-radius: 3px;
/* transition-property: background;
transition-duration: 1s; */
transition: background 1s;
}

We would have to define additional values on the transition property so that it is also animable by transitions:

a {
text-decoration: none;
color: #111;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
background: red;
border-radius: 3px;
transition: background 1s, border-radius .2s;
}

And in the hover event:

a:hover{
background: blue;
border-radius: 30px;
}

In the example above, we have to define a time of 1 second for the background transition and 0.2 seconds for
the border-radius; in these configurations, too, we can specify additional rules like delay, to delay the animation,
for example, to start the border-radius animation one second after the hover event, which would be, just after the
background animation ends:

a {
***
transition: background 1s, border-radius .2s ease 1s;
}

And we will have:

4
We can define other options, for example, the speed curves that we will see later in the book:

transition: background 1s ease-in , border-radius .2s ease 1s;

Among many other configurations; This is a property that has multiple configurations and in this section, only
some of them have been shown, and it is up to the reader to investigate other possible configurations.

An easy way to use transitions for any number of properties is to use the value of all:

transition: all .2s;

For the example that we are carrying out, both the transition for the background and the border-radius are
executed at the same time in a time of 0.2 seconds:

Countable properties can be animated, for example, a property that cannot be animated is visibility or display
since they are states and there are no transitions between these states; in the same way, if you have a question
about which property can be animated or not, you can go into practice and try an example.

2D transformations
From CSS, we can also use the typical geometric transformations, such as rotate, scale, translate and also the
skew transformation; we can apply any of these transformations in a very simple way on any HTML element using
the CSS transform property and the corresponding function depending on the transformation you want to perform.
For this section, we will create an HTML document with the following content:

<!DOCTYPE html>
<html lang="es">

5
<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>
<style>
body,
section {
height: 100vh;
/* background: #111; */
display: flex;
gap: 10px;
flex-direction: row;
justify-content: center;
align-items: center;
}

section {
flex-direction: column;
}

div {
width: 200px;
height: 200px;
background: #5500FF;
transition: all 1s;
}

div img {
width: 100%;
}
</style>
</head>

6
<div class="skew"><img src="tiger.jpg" alt=""></div>
</section>

</body>

</html>

With this, we have a couple of columns with 4 rows, the first column is just a DIV with a square background color,
and the second is just any image:

7
8
Transition
Let's start by evaluating the translation operation, for this, we have the CSS function called translate(), which can
take several configurations and variants, for example:

Translate on the X axis 10 pixels to the left:

transform: translate(-10px);

Or to the right

transform: translate(10px);

Translate on the X axis 10 pixels to the left and fifty to the top (up):

transform: translate(-10px, -50px);

Translate on the X axis 10 pixels to the left and fifty to the bottom:

transform: translate(-10px, 50px);

Use them independently:

transform: translateX(-10px) translateY(5px);

Or in percentages as another measurement factor:

transform: translate(-10px, 5%);

You can place the following snippet on the previous page and comment and uncomment the rules and evaluate
the result:

section div.translate:hover {
transform: translate(10px);
transform: translate(-10px, -50px);
transform: translate(-10px, 5%);
transform: translateX(-10px) translateY(5px);
}

9
Rotation
To rotate an HTML element, we have the CSS function called rotate(), which can take several configurations and
variants, for example:

Rotate 10 degrees:

transform: rotate(10deg);

Or in the negative:

transform: rotate(-10deg);

On the X axis:

transform: rotateX(10px);

On the Y axis:

transform: rotateX(10px);

You can place the following snippet on the previous page and comment and uncomment the rules and evaluate
the result:

section div.rotate:hover {
transform: rotate(10deg);
transform: rotate(-10deg);
transform: rotate(380deg);
}

10
Scale
To apply scaling, we have the CSS function called scale(), which can take several configurations and variants, for
example:

Scale to half the image size on both axes:

transform: scale(.5);

Or double:

transform: scale(2);

Or indicate the scaling of half the size in the X and double in the Y:

transform: scale(.5, 2);

Or independently for X:

transform: scaleX(.5);

Or the Y:

transform: scaleY(.5);

11
You can place the following snippet on the previous page and comment and uncomment the rules and evaluate
the result:

section div.scale:hover {
transform: scale(.5);
transform: scale(2);
transform: scale(.5, 2);
}

Skew
As the next transformation, we have the skew transformation, which allows twisting an HTML element diagonally;
For this, we use the CSS function called skew() which can take several configurations and variants, for example:

Skew 30 degrees:

transform: skew(30deg);

Skew 30 degrees varying along the X and Y axis:

12
transform: skew(30deg, -15deg);

Or on the X axis:

transform: skewX(30deg);

Or in the Y:

transform: skewY(30deg);

You can place the following snippet on the previous page and comment and uncomment the rules and evaluate
the result:

section div.skew:hover {
transform: skew(30deg);
transform: skew(30deg, -15deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
}

Finally, the complete code:

13
<!DOCTYPE html>
<html lang="es">

<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>
<style>
body,
section {
height: 100vh;
/* background: #111; */
display: flex;
gap: 10px;
flex-direction: row;
justify-content: center;
align-items: center;
}

section {
flex-direction: column;
}

div {
width: 200px;
height: 200px;
background: #5500FF;
transition: all 1s;
}

div img {
width: 100%;
}

section div.translate:hover {
transform: translate(10px);
transform: translate(-10px, -50px);
transform: translate(-10px, 5%);
transform: translateX(-10px) translateY(5px);
}

section div.rotate:hover {
transform: rotate(10deg);
transform: rotate(-10deg);
transform: rotate(380deg);

14
}

section div.scale:hover {
transform: scale(.5);
transform: scale(2);
transform: scale(.5, 2);
}

section div.skew:hover {
transform: skew(30deg);
transform: skew(30deg, -15deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
}
</style>
</head>

</body>

</html>

Remember that these are just some variants and values that you can use, you can get more information at:

https://developer.mozilla.org/en/docs/Web/CSS/transform

15
Chapter 2: Transitions and translations on buttons
In this first chapter, we are going to create many examples of CSS transitions applied to buttons, in these
examples we will mainly apply geometric transformations, but we will also work with other CSS properties.

As a recommendation, the reader is advised to try, change and in general, experiment with all the examples
presented in this chapter, since, when it comes to the possible effects that you can obtain, only your imagination is
the limit.

First effect
For the first effect that we are going to obtain, we are going to start with the following code:

section1\hover1\index.html

<!DOCTYPE html>
<html lang="en">

<body>

<a href="#">Button</a>
</body>

</html>

And the CSS:

section1\hover1\style.css

body{
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
16
color: #262626;
font-family: sans-serif;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
}

With this, we will have:

For the first effect, in which we move a container applying translations when receiving a hover event, we are
going to create the container, in CSS, we have it very easy since, by means of the before and after selectors, we
can create additional containers easily, to do this, we use the following code:

a:before {
content: '';
position: absolute;
left: 0;
top: 0;
background-color: #002299;
height: 100%;
width: 100%;
z-index: -1;
transform-origin: top right;
transform: rotate(90deg);
17
transition: transform 1s;
}

And we will have:

As you can see, aside from the button, we just created another container with the same dimensions as the parent
container, as an exercise you can vary the properties of transform-origin and transform and evaluate the
behavior.

It is important to note that the extra container, by default we will not want to show it; to hide it, we have:

a {
***
overflow: hidden;
}

Although, you can do without the overflow property for the time being for testing.

Apply translations in the extra container

Now, what happens if we want to change some value of some property of the extra container when receiving the
hover event from the user; if we place the following CSS:

a:hover{
background: #F00;
}

This would affect the button:

18
In order to make changes to the container created by the before selector when receiving the hover event, we
have:

a:hover:before,
background: #F00;
}

In our case, we don't want to change the color, but if the rotation; for it:

a:hover:before{
transform: rotate(0deg);
}

And by applying the hover event, we will have:

19
We can also apply the hover event on the button, to change the text color:

a:hover{
color: #FFF;
}

And we will have when completing the hover effect:

With the exercise complete, you can activate the overflow:

a{
text-decoration: none;
color: #262626;
font-family: sans-serif;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
background: transparent;
overflow: hidden;
}

Variations
You can perform the translation from other axes:

20
And evaluate the result; for example:

a:before{
***
transform-origin: bottom right;
}

You can delay the effect by applying a delay and with this, the darkening effect when the container moves along
with the color change of the text are applied together:

a,
button {
***
transition: color 800ms 200ms;
}

With this, we will have the first effect ready.

21
Second effect
In this second effect, we will not use the geometric transformations, if not, the displacement using the position
property, in this opportunity, translation instead of rotation; we will start from the same initial code:

section1\hover2\index.html

<!DOCTYPE html>
<html lang="en">

<body>

<a href="#">Button</a>
</body>

</html>

And the CSS:

section1\hover2\style.css

body{
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
color: #262626;
font-family: sans-serif;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
}

before and after selector to create an extra component:

22
a:before {
content: '';
height: 100%;
width: 100%;
background: #5500FF;
position: absolute;
right: 100%;
top: 60%;
transition: all 1s;
z-index: -1;
}

a:after {
content: '';
height: 100%;
width: 100%;
background: #002299;
position: absolute;
left: 100%;
top: -60%;
transition: all 1s;
z-index: -1;
}

You can play around with the code above, and remove any translation or positioning so you can see exactly where
the extra containers are built:

As you can see, they are placed at the beginning (before) and at the end (after) of the main button or container
(not including its PADDING); but, by altering its positioning via the POSITION property, the initial positioning is
rewritten.

23
We'll use the above code to scroll these extra containers:

a:hover::before {
right: 0%;
}

a:hover::after {
left: 0%;
}

And change the text color:

a:hover{
color: #FFF;
}

And by applying the hover event, we will have:

You can try different combinations on the final and/or initial positioning to have other types of effects:

a:before {
***
right: 80%;
top: 60%;
***
}

a:after {
***
left: 80%;
top: -60%;
}

a:hover::before {
right: -10%;
top:50%;
}

a:hover::after {
24
left: -10%;
top: -50%;
}

Or indicate other types of properties such as rounding:

a:before {
***
border-radius: 20px;
}
a:after {
***
border-radius: 20px;
}

Third effect
For this purpose, we will start from the initial code of:

section1\hover3\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">Button</a>
</body>

</html>

And the CSS:

section1\hover3\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;

25
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: sans-serif;
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
}

Like the first effect, we'll use an extra wrapper generated by the before selector and apply a translation, but this
time it will be a Y axis translation:

a:before{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #5500FF;
z-index: -1;
transform: translateY(100%);
transition: all 1s;
}

And by applying the hover event, we will have:

a:hover:before{
transform: translateY(0%);
}
a:hover{
color:#FFF
}

Remember that you can change the angle of the translation:

a:before{
transform: translateY(-100%);
}

26
And by applying the hover event, we will have:

Fourth effect
For this purpose, we will start from the initial code of:

section1\hover4\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">Button</a>
</body>

</html>

And the CSS:

section1\hover4\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
color: #262626;
font-family: roboto;

27
font-size: 40px;
border: 5px solid #5500FF;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
transition: all 1s;
}

This time we will apply changes through the weight of the font, the border and the spacing between letters:

a{
border: 5px solid #5500FF;
font-weight: 300;
letter-spacing: 0;
}
a:hover{
font-weight: 900;
letter-spacing: 12px;
border: 8px solid #5500FF;
}

And by applying the hover event, we will have:

As you can see, we also changed the font, this is because, depending on the font you are using, the transition can
be a bit abrupt or smooth as it is the case when using the roboto font; you can try other sources like:

a {
font-family: sans-serif;
}

And compare results.

Fifth effect
For this purpose, we will start from the initial code of:

section1\hover5\index.html
28
<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">Button</a>
</body>

</html>

And the CSS:

section1\hover5\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
/* border: 5px solid #5500FF; */
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
transition: all 1s;
border-radius: 30px;
}

29
For this effect, we removed the use of the background and border color which will be applied via the after
selector:

a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
border-radius: 30px;
z-index: -2;
}

Very important the z-index in -2, with this, we will make this layer behind the container created by the before,
which will be the animatable container:

a:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background: #4400BB;
border-radius: 30px;
z-index: -1;
transition: all 0.4s;
}

By default, it is a container that does not occupy size, this is because the width is defined as zero; for the hover
effect, we increase the width to the maximum; when showing the after layer (by not having a background color
established in the link) now the container created in the before whose layer is above the after layer is displayed;
finally, we have:

a:hover:before{
width: 100%;
}
a:hover{
color:#FFF;
}

And by applying the hover event, we will have:

30
Sixth effect
For this purpose, we will start from the initial code of:

section1\hover6\index.html

<!DOCTYPE html>
<html lang="en">

<body>

<a href="#">
Button
<span class="blobs">
<span class="blob"></span>
<span class="blob"></span>
<span class="blob"></span>
<span class="blob"></span>
</span>
</a>

</body>

</html>

This is an effect, based on about 4 bubbles that will appear from the bottom; which is defined by the HTML of:

31
And the base CSS:

section1\hover6\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
border: 5px solid #5500FF;
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
transition: all 1s;
border-radius: 10px;
}

We will apply the following design for the bubbles:

.blobs{
z-index: -1;
/* overflow: hidden; */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FFFF;
}

.blob{
position: absolute;
top: 2px;
width: 25%;

32
height: 100%;
background: #5500FF;
border-radius: 100%;
transform: translate3d(0,150%,0) scale(1.8);
transition: transform 0.45s;
}

A translation is applied to these bubbles in the Y axis, so that they are outside the container, at the bottom:

translate3d(0, 150%, 0)

So that the bubbles do not all appear at the same time, we will place a delay in each of them:

.blob:nth-child(1){
left: 0;
transition-delay: 0s;
}
.blob:nth-child(2){
left: 30%;
transition-delay: 0.1s;
}
.blob:nth-child(3){
left: 60%;
transition-delay: 0.2s;
}
.blob:nth-child(4){
left: 90%;
transition-delay: 0.3s;
}

Finally, in the hover event, we start the transition, to do this, we restore the translation on the Y axis of the
bubbles:

a:hover .blob{
transform: translateZ(0) scale(1.8);
}

A scaling is applied, so that the bubbles occupy the entire size of the parent container and there are no white
spaces:

scale(1.8)

So that you understand the code shown perfectly, comment the following rule:

overflow:hidden;

So you can see the shape and positioning of the bubbles, as well as the scaling:
33
scale(1.8)

And in delay for the bubbles:

***
.blob:nth-child(4){
left: 90%;
transition-delay: 0.3s;
}

And by applying the hover event, we will have:

Seventh effect
For this purpose, we will start from the initial code of:

section1\hover7\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">Button</a>
</body>

</html>

And the base CSS:

section1\hover7\style.css

body {
34
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
border: 5px solid #5500FF;
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
transition: all 1s;
border-radius: 10px;
}

before and after containers to have an effect similar to the previous one:

The problem is, we need to have four containers and with the before and after we only have two; so, to generate
the two containers we need, we'll use a shadow:

35
Along with the before and after property:

a:before,
a:after {
content: '';
position: absolute;
top: 0px;
width: 25%;
height: 100%;
background: #5500FF;
border-radius: 100%;
transform: translate3d(0, 150%, 0) scale(1.8);
transition: all 0.45s;
z-index: -1;
box-shadow: 50px 15px 0px 0px #5500FF;
}

The shadow is a somewhat complex property in the CSS, you can search the Internet for something like:
'box-shadow css generator' and enter any link that allows you to generate shadows through a form.

We can't animate the shadow independently of the container like it was with the SPANs in the previous effect, so
we change the CSS a bit to alter its positioning so it set next to the extra containers; we also define the position of
both extra containers:

a:before {
left: 0;
}

36
a:after {
top: 80px;
right: 20%;
}

If we don't hide the containers, we should see something like:

That is, the 2 containers and shadows are shown side by side, we moved this position to simulate the delay.

For the part animated by hover, we put the containers and shadows in line and of course, we move the
containers:

a:hover::before,
a:hover::after {
transform: translateZ(0) scale(1.8);
top: 0;

37
box-shadow: 50px 0 0px 0px #5500FF;

In the code above, you can see that we already applied the rules for after; with this, we will have an effect similar
to the previous one without the need to use additional HTML.

And we will have:

Eighth effect
For this purpose, we will start from the initial code of:

section1\hover8\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And in the base CSS, we put a light background color so that the color is prettier to the button color that we show
a little later:

section1\hover8\style.css

body {
height: 100vh;
background: #06bde7;
display: flex;
justify-content: center;

38
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
/* border: 5px solid #5500FF; */
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
/* overflow: hidden; */
}

For this effect, we'll default to displaying a clear white translucent container as the background:

a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.4);
z-index: 1;
transition: all .3s;
}

The after will be hidden using the opacity property set to zero and we will show a transparent white color border:

a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
border: 4px solid rgba(255, 255, 255, 0.4);
z-index: 1;
transform: scale(1.2, 1.2);
transition: all .3s;
}

39
And by setting the hover, we will reverse the display of the container before with the after:

a:hover::before {
opacity: 0;
transform: scale(0.5, 0.5);
}
a:hover::after {
opacity: 1;
transform: scale(1, 1);
}

And when applying the hover effect:

Ninth effect
For this purpose, we will start from the initial code of:

section1\hover9\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the base CSS:

section1\hover9\style.css

body {
height: 100vh;

40
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
/* border: 5px solid #5500FF; */
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
overflow: hidden;
}

This effect will be similar to the third effect, in which, we will apply translations to move the extra container, but, in
this case, we will show an aligned filler text using the flex together with the extra container:

a:before {
content: 'Text';
color: #FFF;
background: #5500FF;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateY(-100%);
transition: all .5s;
display: flex;
align-items: center;
justify-content: center;
}

And by applying the hover effect, we will have:

41
Tenth effect
For this purpose, we will start from the initial code of:

section1\hover10\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the base CSS:

section1\hover10\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
/* border: 5px solid #5500FF; */
font-weight: 300;
letter-spacing: 0;
padding: 40px 80px;
position: relative;
overflow: hidden;
transition: background 0.8s;
}

42
We will create a slanted container like the following:

The CSS is as follows:

a::before {
content: '';
background: #FFF;
top: 0;
left: 0;
width: 130%;
height: 30px;
position: absolute;
transform: translate(-100%) rotate(45deg);
transition: transform 0.5s;
}

In this opportunity, we vary the width and height of the rotated container, the idea is that the border is not seen
when the effect is made.

For the hover effect, we will use the translation of the extra container and the color change effect on the link:

a:hover::before {
transform: translateX(100%) rotate(45deg);
}

a:hover{
background: #5500FF;
}

And when applying the hover effect:

43
Eleventh effect
For this purpose, we will start from the initial code of:

section1\hover11\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
<span>
Button
</span>
<div class="icon">X</div>
</a>

</body>

</html>

And the base CSS:

section1\hover11\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

44
a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
border: 5px solid #5500FF;
border-radius: 15px;
font-weight: 300;
letter-spacing: 0;
padding: 50px 120px;
position: relative;
overflow: hidden;
transition: background 0.8s;
}

For this effect, we will create two containers, positioned next to each other of maximum size:

a span,
a .icon {
width: 100%;
height: 100%;
position: absolute;
top: 0;
transition: all .3s;
display: flex;
justify-content: center;
align-items: center;
}

One of the containers, that of the main text, will be shown by default:

a span{
left: 0;
}

And the one of the icon, we hide it totally:

a .icon{
left: 100%;
}

By do the hover event, we invert the display of the containers:

a:hover span{
left: -100%;
}

45
a:hover .icon{
left: 0;
}

And when applying the hover effect :

Twelfth effect
For this purpose, we will start from the initial code of:

section1\hover12\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
<span>
Button
</span>
<div class="icon">X</div>
</a>

</body>

</html>

And the base CSS:

section1\hover12\style.css

body {
46
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #262626;
font-family: roboto;
font-size: 40px;
border: 5px solid #5500FF;
border-radius: 15px;
font-weight: 300;
letter-spacing: 0;
padding: 50px 120px;
position: relative;
overflow: hidden;
transition: background 0.8s;
}

This effect will be a variation of the previous one, but this time we will show both containers side by side, but in
different proportions; being absolute positions that we are using, we can overlap the layers and align them using
the left or right properties; at the same time, by aligning the content with the flex, everything is centered:

a span,
a .icon {
height: 100%;
position: absolute;
top: 0;
transition: all .3s;
display: flex;
justify-content: center;
align-items: center;
}

a span{
left: 0;
width: 75%;
}

a .icon{
/* left: 100%; */
right: 0;
width: 25%;

47
}

And by doing the hover event, we scroll the containers:

a:hover span{
left: -100%;
}

a:hover .icon{
/* left: 0; */
width: 100%;
}

For this effect, we also create a border, using an extra wrapper to show a gap between the two wrappers on the
button, and hide it with a transparent border by doing the hover event:

a .icon:before{
content: '';
background: #5500FF;
width: 5px;
height: 100%;
position: absolute;
left: 0;
}

a:hover .icon:before{
background: transparent;
}

And when applying the hover event :

Thirteenth effect
For this purpose, we will start from the initial code of:

section1\hover13\index.html

<!DOCTYPE html>
<html lang="en">
<head>

48
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>

<a href="#">
<span>Button</span>
<div class="icon">
X
</div>
</a>
</body>
</html>

And the base CSS:

section1\hover13\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We will take an SVG icon from this website, which, although it is inspired on Tailwind.css, being purely HTML, we
can use it in any other development class and you can select the one you prefer:

49
https://heroicons.com/

And we put it:

<a href="#">
<span>Button</span>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107
1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0
01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114
1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964
51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
</svg>
</div>
</a>

Apart from this, we vary other styles of the button; when the hover event happens:

a:hover{
border: 5px solid #CC3322;
border-radius: 2px;
}

The color and size of the icon container:

a .icon svg {
color:#FFF;
width: 40px;
height: 40px;
transition: all .3s;
}
a:hover .icon svg{
width: 60px;
height: 60px;
color: #CC3322;
}

And when applying the hover event:

50
Fourteenth effect
For this purpose, we will start from the initial code of:

section1\hover14\index.html

<!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">
<link rel="stylesheet" href="style.css">
</head>
<body>

<a href="#">
Button
</a>
</body>
</html>

And the base CSS:

section1\hover14\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: transparent;
font-family: roboto;
font-size: 40px;
border: 5px solid #5500FF;

51
border-radius: 5px;
font-weight: 300;
letter-spacing: 0;
padding: 50px 120px;
position: relative;
overflow: hidden;
transition: all 0.3s;
background: #333;
}

As you can see, we are completely hiding the text, using a transparent color; therefore, only the background color
of the button is visible.

We will create a pair of exactly the same containers in which we display the button text just like we did in effect
nine, but now there will be two containers:

a:before,
a:after{
content: 'Button';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #5500FF;
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
transition: all 0.5s;
}

Of which, we will show one of them, and the other will be hidden by transformations:

a:after{
transform: translate(-100%,100%);
}

And when applying the hover event:

52
Variation
As possible variations, we can apply the translations in other axes and/or rotations:

a:after{
transform: translate(100%,-100%) rotate(45deg);
}
/* a:before{
transform: translate(0,0) rotate(45deg);
} */

a:hover:before{
transform: translate(-100%,100%) rotate(45deg);
}

Fifteenth effect
For this purpose, we will start from the initial code of:

section1\hover15\index.html

And the base CSS:

section1\hover15\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;

53
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
border: 4px solid #5500FF;
background: #5500FF;
border-radius: 5px;
font-weight: 300;
letter-spacing: 0;
padding: 30px 80px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;

In this effect, we will create an extra container, using the DIV defined as part of the button, in which we will place
the icon:

<a href="#">
Button
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107
1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0
01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114
1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964
51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
</svg>
</div>
</a>

We create two containers from the icon, one that is understood by the DIV itself and another one that corresponds
to the child element that is the SVG. For the DIV, we'll create an absolutely positioned box with a border and
rotated; this container, it will be hidden by opacity:

a .icon {

54
position: absolute;
left: 80%;
top: 10px;
width: 80px;
height: 80px;
border: 4px solid #5500FF;
transform: rotate(45deg);
opacity: 0;
transition: all 0.3s;
}

In the SVG container, we will invert the rotation of the container, to cancel it and with this, only the rotated
container (DIV) appears and not its content (SVG):

a .icon svg {
padding: 10px;
width: 60px;
height: 60px;
color: #5500FF;
transform: rotate(-45deg);
}

And in the hover event, we scroll the container of the DIV a bit and display it by opacity:

a:hover .icon {
left: 100%;
opacity: 1;
}

We also apply a change to the button in the hover event:

a:hover {
background: transparent;
color: #5500FF;
padding: 30px 60px;
}

And when applying the hover event:

55
Sixteenth effect
For this purpose, we will start from the initial code of:

section1\hover16\index.html

And the base CSS; as you can see, the background color and the text of the button will be transparent:

section1\hover16\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: transparent;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 5px;
font-weight: 300;
letter-spacing: 0;
padding: 30px 80px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
}
56
We will create two extra containers to display the content:

a:before,
a:after {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 1;
color: #5500FF;
background: #220088;
transition: all 0.5s;
content: 'Button';
}

We will show one of the containers permanently (the before container); the other (the after container) will be
hidden, offset in the Y-axis, and rotated 90 degrees:

a:after {
content: 'Text 2';
background: #5500FF;
color: #220088;
opacity: 0;
transform: translateY(-50%) rotateX(90deg);
}

In practice, it will be on top of the before container; you can test from the developer console so you understand
the positioning:

57
When the hover event happens, we flip the containers using the rotations:

a:hover:after{
opacity: 1;
transform: translateY(0) rotateX(0);
}

a:hover:before{
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}

And we will have the following effect when the hover event happens:
58
Seventeenth effect
For this purpose, we will start from the initial code of:

section1\hover17\index.html

And the base CSS:

section1\hover17\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: #5500FF;
font-family: roboto;
font-size: 40px;
border: 4px solid #5500FF;
59
border-radius: 5px;
font-weight: 300;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

We will place an icon on the button:

<a href="#">
Button
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107
1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0
01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114
1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964
51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
</svg>
</a>

For the SVG, we will place an absolute positioning:

a svg{
position: absolute;
left: 65%;
width: 40px;
height: 40px;
color: #FFF;
transition: all .3s;
opacity: 0;
}

And in the hover event, we scroll it:

a:hover svg{

60
left: 73%;
opacity: 1;
}

Since it is an absolute positioning, moving the icon does not affect the total size of the container and therefore, to
get the desired effect, parallel to the movement of the button and when the hover event happens, we are going to
place a PADDING to the right:

a:hover{
padding-right: 60px;
}

And we will have the following effect when the hover event happens:

Variation
As a possible variation, we can define the icon for the left, to do this, we change the property of left to that of
right, leaving its original values:

a svg{
position: absolute;
right: 65%;
width: 40px;
height: 40px;
color: #FFF;
transition: all .3s;
opacity: 0;
}

a:hover{
padding-left: 60px;
}

a:hover svg{
right: 73%;
opacity: 1;
}

And we will have the following effect when the hover event happens:

61
Eighteenth effect
For this purpose, we will start from the initial code of:

section1\hover18\index.html

<!DOCTYPE html>
<html lang="en">

<body>

<a href="#">
Button

</a>
</body>

</html>

And the base CSS:

section1\hover18\style.css

62
body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: #5500FF;
font-family: roboto;
font-size: 40px;
border: 4px solid #5500FF;
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
transform: skewX(-15deg);
}

In this effect, we are going to create 3 containers with the same character:

<a href="#">
Button

Using the positioning, we will indicate that it is absolute and relocate it to the right of the button:

63
a span{
position: absolute;
font-size: 70px;
line-height: 70px;
right: 0;
top: -5px;
transition: all .3s;
}

And the 3 icons will appear overlapping:

In the hover event, we move two of the three icons to the right and left:

a:hover span{
transform: translateX(-25px);
}

a:hover span:nth-child(1){
right: 28px;
}
a:hover span:nth-child(3){
right: -28px;
}

Giving the feeling that the icon triples on hover event; at the same time, we increase the right PADDING of the
button to adjust to the space required by the icons when the hover event happens (as we did in the previous
effect):

a:hover{
padding-right: 100px;
}

Giving the feeling that the button expands to position the extra icons; another important detail is that, by having so
much PADDING on the right, move the icons out of the parent container:

64
To avoid this, we are going to move the SPANs so that they do not leave the button:

a:hover span{
transform: translateX(-25px);
}

And we will have the following effect when the hover event happens:

The problem with this positioning is that, being defined in percentages, by varying the size of the button, the
alignment is broken:

To avoid this, we can precisely align to pixels:

a:hover span{
transform: translateX(-25px);
}

a:hover span:nth-child(1){
right: 28px;
}
a:hover span:nth-child(3){
right: -28px;

65
}

And the button will no longer break regardless of its size:

Nineteenth effect
For this purpose, we will start from the initial code of:

section1\hover19\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover19\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
66
}

a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
border: 4px solid #5500FF;
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

Let's build the background color of the button, from an internal type box-shadow:

a:hover {
box-shadow: 0 0 40px 40px #5500FF inset;
}

And we will have the following effect when the hover event happens:

Twentieth effect
For this purpose, we will start from the initial code of:

section1\hover20\index.html

<!DOCTYPE html>
<html lang="en">

67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover20\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: #5500FF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

For this effect, we are going to define a border using the inner and outer box-shadow property:

a:hover{

68
background: transparent;
box-shadow: 0 0 10px 0 #5500FF inset, 0 0 10px 4px #5500FF;
}

And we will have the following effect when the hover event happens:

Twenty first effect

For this purpose, we will start from the initial code of:

section1\hover21\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover21\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

69
a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

We will create an extra container aligned right in the middle of the button (for this we use left at 50% and
translateX at -50%) which will appear hidden indicating the width at zero:

a:after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 100%;
background: #5500FF;
z-index: -1;
border-radius: 5px;
transition: all 0.3s;
}

a:hover:after{
width: 100%;
}

And in the hover event, we display the container:

a:hover:after{
width: 100%;
}

70
And we will have the following effect when the hover event happens:

Twenty second effect

For this purpose, we will start from the initial code of:

section1\hover22\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover22\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;

71
color: #FFF;
background: #5500FF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

We are going to create 2 extra rotated containers, that by its rotation of 270 degrees, appear hidden:

a:before,
a:after{
content: 'Button';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: blue;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
transform: rotateX(270deg);
transform-origin: top;
}

We vary the style of the container created by the after selector a bit; the most important is the transform-origin in
bottom, with which we vary the angle of when performing the rotation:

a:after{
background: yellow;
transform-origin: bottom;
transition-delay: 0.15s;
}

And for the hover event, we reset the rotation on both containers:

72
a:hover:before,
a:hover:after{
transform:rotateX(0deg)
}

And we will have the following effect when the hover event happens:

Variants
As a variant of the previous exercise, you can change the initial rotation angles of the container and hide it using
the overflow property:

a {
overflow: hidden;
}

a:before,
a:after{
***
/* transform: rotateX(90deg);*/
transform: rotateX(1800deg);
}

Twenty-third effect
For this purpose, we will start from the initial code of:

section1\hover23\index.html

<!DOCTYPE html>
<html lang="en">

73
<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover23\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 5px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

For this effect, we are going to create an extra container with rounded borders and hide it by setting the height
property to zero:

a:before{
content: "";
position: absolute;
bottom: 0;

74
left: 0;
width: 100%;
height: 0;
background: red;
z-index: -1;
border-radius: 50% 50% 0 0;
/* transition: all 0.5s; */
transition: height 0.5s, border-radius 0.5s 0.17s;
}

In this opportunity, we vary the transition property a bit, since, for the desired effect, we want the container to
grow, varying the height property from zero to 100% and with a short delay, which in this example is .17s, we will
apply a transition for the border-radius property:

transition: height 0.5s, border-radius 0.5s 0.17s;

And in the hover event:

a:hover:before{
height: 100%;
border-radius: 0;
}

And we will have the following effect when the hover event happens:

Variants
As a variant of the previous exercise, you can remove the delay from the transition:

transition: height 0.5s, border-radius 0.5s;

/*transition: all 0.5s;*/

Instead of removing the border-radius, we increase the width of the container by a greater proportion, giving the
effect that the border-radius is nullified:

a:hover:before{
height: 200%;
}

75
Twenty-fourth effect
For this purpose, we will start from the initial code of:

section1\hover24\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover24\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
76
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

This effect will create an extra container centered in the middle which will be hidden by setting the width and
height properties to zero:

a::before{
content: '';
position: absolute;
left: 50%;
transform:translateX(-50%);
width: 0;
height: 0;
background: red;
border-radius: 50%;
transition: width 0.5s, height 0.5s, border-radius 0.5s .17s;
z-index: -1;
}

In the hover event, we display the extra container; so that the effect is more proportional, we increase the height
in a greater proportion:

a:hover:before{
width: 100%;
height: 300%;
border-radius: 0;
}

And we will have the following effect when the hover event happens:

Twenty fifth effect

For this purpose, we will start from the initial code of:

section1\hover25\index.html
77
<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover25\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;

78
justify-content: center;
align-items: center;
}

Let's create a couple of extra containers, with background color and border that take up all the space given by the
parent:

a:before,
a:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s;
}

As you can see if you view the button, the background and border color is always visible, and is defined by the
two extra containers.

In the hover event, we'll apply some rotations and hide the background color:

a:hover:before{
transform: rotate(-45deg);
background: rgba(255, 255, 255, 0);
}
a:hover:after{
transform: rotate(45deg);
background: rgba(255, 255, 255, 0);
}

And we will have the following effect when the hover event happens:

If you remove the overflow from the button, we will have a little different effect:

79
a {
/* overflow: hidden; */
}

Twenty-sixth effect
For this purpose, we will start from the initial code of:

section1\hover26\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover26\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
color: transparent;
background: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */

80
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

As you can see, the background and text color of the button is hidden; which are replaced by the container
created with the before selector:

a:before,
a:after{
content: 'Button';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
}

We define additional rules to reposition the extra container created with after and hide it by scaling to zero:

a:after{
left: -100%;
transform: scale(0) rotateY(0deg);
}

In the hover event, we flip the containers and apply a 360 degree rotation, giving an interesting effect:

a:hover:before{
left: 100%;
transform: scale(0) rotateY(360deg);
}
a:hover:after{
left: 0;

81
transform: scale(1) rotateY(360deg);
}

And we will have the following effect when the hover event happens:

You can indicate the opacity to make the changes smoother:

a:before,
a:after{
***
opacity: 1;
}
a:after{
***
opacity: 0;
}
a:hover:before{
***
opacity: 0;
}
a:hover:after{
***
opacity: 1;
}

Twenty-seventh effect
For this purpose, we will start from the initial code of:

section1\hover27\index.html

<!DOCTYPE html>
<html lang="en">

82
<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover27\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
background: transparent;
font-family: roboto;
font-size: 40px;
border: 1px solid #5500FF;
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

We create a couple of extra containers; in this opportunity, we are not going to use the width and height, since we
need to create a triangle, and therefore, in these cases, to generate a triangle-shaped container we use the
border by defining a size (with the border-width) and color (with the border-color) in any of its axes (top, right,
bottom, left); initially, it will have the following structure:

a:before,
a:after

83
{
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 0 0 0 0;
border-style: solid;
transition: all 0.5s;
z-index: -1;
}

These extra containers will have a triangle shape (for this the border-color property is used, indicating a color on
one of its sides) and we position it at the ends:

a:before{
bottom: 0;
left: 0;
border-color: transparent transparent transparent #5500FF ;

}
a:after{
top: 0;
right: 0;
border-color: transparent #5500FF transparent transparent ;
}

When the hover event happens, we define a width for the border with which the button is completely filled with the
extra triangular containers:

a:hover::before,
a:hover::after{
border-width: 65px 220px;
}

As a recommendation, test with the hover event active from the browser's developer console and vary the
borders in each of its properties and in both containers:

84
You can force the hover state on the button, from Google Chrome, by left clicking: "Force state" - ":hover":

85
And we will have the following effect when the hover event happens:

Twenty-eighth effect
For this purpose, we will start from the initial code of:

section1\hover28\index.html
86
<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover28\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

87
justify-content: center;
align-items: center;
}

Let's create two extra containers for the effect:

a::before,
a::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #5500FF;
z-index: -1;
transition: all 0.3s;
}

And we move it to the sides:

a::before {
transform: translateX(-100%);
}

a::after {
transform: translateX(100%);
}

And the extra containers that are hidden would be:

In the hover event, we move the extra containers:

a:hover:before {
transform: translate(-50%);
}

a:hover:after {
transform: translate(50%);
}

88
And we will have the following effect when the hover event happens:

Variants
As possible variants, you can change the axis of the transition:

a::before {
transform: translateY(-100%);
}

a::after {
transform: translateY(100%);
}

a:hover:before {
transform: translate(-50%);
}

a:hover:after {
transform: translate(50%);
}

Or for the Y axis only:

a::before {
transform: translateY(-100%);
}

a::after {
transform: translateY(100%);
}

a:hover:before {
transform: translateY(-50%);
}

a:hover:after {
transform: translateY(50%);
}

Or partially hide the extra containers, on the X axis:

89
a::before {
transform: translateX(-95%);
}

a::after {
transform: translateX(95%);
}

a:hover:before {
transform: translate(-49%);
}

a:hover:after {
transform: translate(50%);
}

Or from the Y axis:

a::before {
transform: translateY(-95%);
}

a::after {
transform: translateY(95%);
}

a:hover:before {
transform: translateY(-49%);
}

a:hover:after {
transform: translateY(50%);
}

Twenty-ninth effect
For this purpose, we will start from the initial code of:

section1\hover29\index.html

<!DOCTYPE html>
<html lang="en">

90
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover29\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;

a {
text-decoration: none;
color: #5500FF;
background: #FFF;
font-family: roboto;
font-size: 40px;
border: 1px solid #FFF;
border-radius: 100px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
transition: all 0.3s;
}

We create an extra container:

a::after {
content: '';
height: 100%;

91
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #FFF;
transition: all 0.3s;
}

When the hover event happens, we scale the extra container down to hide it with opacity; as for the button, we
move it about 5 pixels:

a:hover{
transform: translateY(-5px);
}

a:hover:after{
transform: scaleX(1.5) scaleY(1.6);
opacity: 0;
}

And we will have the following effect when the hover event happens:

Thirtieth effect
For this purpose, we will start from the initial code of:

section1\hover30\index.html

<!DOCTYPE html>
<html lang="en">

92
<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover30\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #000;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}

For this effect we will use a linear gradient:

background-image: repeating-linear-gradient(<DEGREES>, <COLOR 1> <MEASURE 1>, <COLOR 2>

<MEASURE 2>, ... <COLOR N> <MEASURE N>);

93
This gradient has the characteristic of infinitely repeating the gradient in all directions, therefore we can use it to
create columns, rows, or the like, easily.

If we want a couple of columns with solid colors with a 45 degree slant:

background-image: repeating-linear-gradient(45deg, #FFF, #FFF 20px, #5500FF 20px, #5500FF

40px);

And we will have:

If we want a pair of columns with a gradient, the only thing we have to indicate is a distance between the final and
initial dimensions:

#FFF, #FFF 20px , #5500FF 30px , #5500FF 40px);

In the example above that would be 10 pixels (30 pixels - 20 pixels), for example:

background-image: repeating-linear-gradient(45deg, #FFF, #FFF 20px, #5500FF 30px, #5500FF

40px);

And we will have:

In this opportunity, we will have a blur between white and purple of 10 pixels.

If we want one more column:

background-image: repeating-linear-gradient(-45deg, #FFF, #FFF 20px, #5500FF 20px, #5500FF

40px, #000 40px, #000 60px);

And we will have:

94
The problem is that, at the time this book was written, this is not an animatable property, therefore things like
varying the number of columns or degrees is not possible, but we can do some combinations; for example, let's
create a container with a size larger than the parent, which we will carry over when the hover event happens:

a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-image: repeating-linear-gradient(-45deg, #FFF, #FFF 20px, #5500FF 20px,
#5500FF 40px);
z-index: -1;
transition: all 0.3s;
}

And for the hover event:

a:hover::before{
transform: translateX(-5%);
}

This will move the container by the given percentage:

To:

95
Variants
As possible variants, you can adjust the angle:

background-image: repeating-linear-gradient(90deg, #FFF, #FFF 20px, #5500FF 20px, #5500FF

40px);

The axis:

a:hover::before{
transform: translateY(-5%);
}

Or vary the transfer:

a:hover::before{
transform: translateX(-50%);
}

Thirty first effect

For this purpose, we will start from the initial code of:

section1\hover31\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button

96
</a>
</body>

</html>

And the base CSS:

section1\hover31\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #5500FF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
background: #111;
}

We need to simulate a border with the extra containers, to obtain the desired animation, therefore, the extra
containers must have a larger size than the parent and with this it is important to note that the overflow must not
be activated:

a::before,
a::after{
content: '';
position: absolute;
left: -4px;
top: -4px;

97
/* width: 110%;
height: 110%; */
width: calc(100% + 8px);
height: calc(100% + 8px);
transition: all 0.3s;
z-index: -2;
background: #5500FF;
}

It is important to note the use of the CSS calc() function; with which, we can add different types of quantities, for
example pixels with inches, or in the case of the previous example, percentages with pixels, with this, we have
that the extra container has the size of the parent adding 8 extra pixels, pixels that we will take advantage of to
define border:

It is important to note the use of the top and left properties to align the container to the size of the child containers
and thus have a proportional border (a feature that we could not obtain if we did not use the calc() function) of 4
pixels.

The extra container defined by after, is the one we will use for the desired effect:

a::after{
background: #F00;
/* transform: translateY(100%); */
z-index: -1;
width:0;
}

important to use the z-index so that the container of the after is positioned above the extra container of the
before; another important point is that, since overflow is not active, we cannot simply move the container of the
after to one of the ends or it would always be visible:

98
And therefore, we will use the width property instead of the translation:

a:hover::after{
/* transform: translateY(0); */
width: calc(100% + 8px);
}

Finally, we have the hover for the button:

a:hover{
color: #F00;
}

With this, when the hover event happens, we have the following effect:

99
Variants
As possible variants, you can change the angle; for this, instead of growing in width, it grows in length:

a::after{
***
height:0;
}

a:hover::after{
height: calc(100% + 8px);
}

Or enable it to grow both in width and height:

a::after{
***
height:0;
width:0;
}

a:hover::after{
height: calc(100% + 8px);
width: calc(100% + 8px);
}

And you can vary other properties, such as color:

a:hover::after{
***
background: blue;
}

Thirty second effect

For this purpose, we will start from the initial code of:

section1\hover32\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover32\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
border-radius: 1px;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
background: #5500FF;
}

We will create two extra containers:

a::before,
a::after {
content: '';

101
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.3s;
background: #6a23f7;
}

And the background color of one of the containers is varied:

a::after {
background: #4103bb;
}

When the hover event happens, we are going to move the containers, one to the top and the other to the bottom:

a:hover::before {
left: 8px;
top: 8px;
}

a:hover::after {
left: -8px;
top: -8px;
}

With this, in the hover event, we have the following effect:

Variants
As possible variants, you can change the angles, varying the displacement of the containers:

a:hover::before {
left: 8px;
top: -8px;
}

a:hover::after {
left: -8px;
102
top: 8px;
}

Or indicate only the offset on one of the sides by indicating only the left property:

a:hover::before {
top: -8px;
}

a:hover::after {
top: 8px;
}

Or top:

a:hover::before {
left: 8px;
}

a:hover::after {
left: -8px;
}

Thirty-third effect
For this purpose, we will start from the initial code of:

section1\hover33\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

103
And the base CSS:

section1\hover33\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

This effect will be similar to the previous effect but, varying the states; we will create the two extra containers:

a::before,
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.3s;
background: #6a23f7;
}

And we vary the color of one of the containers:

104
a::after {
background: #4103bb;
}

By default, we will show the two containers by displacing them a bit from the button (parent container)
proportionally:

a::before {
left: 8px;
top: 8px;
}

a::after {
left: -8px;
top: -8px;
}

And in the hover event, we hide the containers:

a:hover::before,
a:hover::after
{
left: 0;
top: 0;
}

With this, in the hover event, we have the following effect:

Thirty-fourth effect
For this purpose, we will start from the initial code of:

section1\hover34\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover34\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #000;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
background: #FFF;
}

We will create an extra container:

a::after{

106
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 1s;
background-color: #FFF;
}

In the hover event, we scale it and hide it using opacity:

a:hover::after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}

With this, in the hover event, we have the following effect:

Thirty-fifth effect
For this purpose, we will start from the initial code of:

section1\hover35\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>
107
</html>

And the base CSS:

section1\hover35\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

As we did in the thirty-first effect, we are going to create two extra containers where the width and height exceed
that of the parent container (button) to align the containers as if was borders:

a::before,
a::after{
content: '';
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
top: -10px;
left: -10px;
z-index: -2;
background: #5500FF;

108
transition: all 0.3s;
}

Resulting:

The extra wrapper generated by the after selector will be above the extra wrapper generated by the before
selector and scaled to zero to be invisible:

a::after{
z-index: -1;
background: red;
transform: scale(0);
}

a:hover{
color: red;
}

When the hover event happens, we scale the container to make it visible again:

a:hover::after{
transform: scale(1);
}

With this, when the hover event happens, we have the following effect:

Variants
You can temporarily increment the value of the after container's z-index property, so that it is visible:

109
a::after{
z-index: 0;
}

And with this:

From this temporary change, you can easily see how the geometric transformations are applied to the extra
container generated by the after selector, which in this case is the scale.

You can vary the effect, defining the origin of the transformation; for instance:

a::after{
***
transform-origin: top left;
}

Or only in one of the points:

a::after{
***
transform-origin: right;
}

Apply these possible variants to have unique effects when applying the hover event; also, you can specify a scale
greater than zero so that the extra container generated by the after selector is always visible.

Thirty-sixth effect
For this purpose, we will start from the initial code of:

section1\hover36\index.html

<!DOCTYPE html>
<html lang="en">
110
<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">
<link rel="stylesheet" href="style.css">
</head>

<body>
<a href="#">
<span>White</span>

</a>
</body>

</html>

We will use two SPANs, for these first tests, we will leave one SPAN commented to only experiment with one of
them and then easily replicate the changes.

And the base CSS:

section1\hover36\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: transparent;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
/* padding: 10px 40px; */
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;

111
align-items: center;
background: transparent;
}

In the SPAN, we define the following rules:

a span{
padding: 8px 5px;
transition: all 0.5s;
}

For the first SPAN, we change the text and background color, as well as set the translation and rotation to zero:

a span:nth-child(1){
color: white;
background: purple;
transform: translateY(0) rotateX(0);
}

And the hover event, we move it, as we did with the sixteenth effect:

a:hover span:nth-child(1){
transform: translateY(50%) rotateX(90deg);
}

Now, let's create an extra container:

a span::before{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}

As you can see in the previous code, we are applying geometric transformations, unlike the sixteenth effect, we do
not have two sibling containers, if not, we have a parent and child container, where the parent is the SPAN and the
child is the extra container created by the selector of before; in practice, the container is positioned in the 3D
space of the parent; therefore, if we hide the parent container using transformations, the same will
happen to the child container, regardless of the transformation rules you apply on the child container.

112
The CSS transform-style property sets whether the child element is positioned in 3D space (preserve-3d) or
embedded (flat) in the element plane.

https://developer.mozilla.org/en/docs/Web/CSS/transform-style

Then, we are going to define a particular style for the first SPAN:

a span:nth-child(1)::before{
color: purple;
background: white;
content: 'Purple';
transform: translateY(-50%) translateZ(32px) rotateX(-90deg);
}

When the hover event happens, we scroll to the parent:

a:hover span:nth-child(1){
transform: translateY(50%) rotateX(90deg);
}

Regardless of the transformation values you apply to the child container, it will not be displayed:

Giving the problem commented before; to be able to work with the child container in the 3D space of the parent
independently, we place:

a span{
***
transform-style: preserve-3d;
}

With this, we don't have to apply extra rotations and translations to the child container:

a:hover span:nth-child(1):before {

113
If not, the ones applied by default:

a span::before{
***
transform: translateY(-50%) translateZ(32px) rotateX(-90deg);
}

As you can see, they are the same transformations applied to the parent in the hover event but in negative;
therefore, applying the hover event resets the transformations for the child container, and we'll have:

In the child container, it is also translated in the Z axis:

translateZ(32px)

And this is, to finish adjusting the container and have the desired effect; it is very important that you test the above
code and understand the importance of transform-style: preserve-3d in the exercise.

Now, let's activate the other SPAN:

<a href="#">
<span>White</span>
<span>Purple</span>
</a>

And we are going to replicate the style that from the first SPAN, to the second SPAN, but, negating all the values:

a span:nth-child(2){
color: purple;
background: white;
transform: translateY(0) rotateX(0);
}
a:hover span:nth-child(2){
transform: translateY(-50%) rotateX(-90deg);
}

a span:nth-child(2)::before{
color: white;
114
background: purple;
content: 'White';
transform: translateY(50%) translateZ(32px) rotateX(90deg);
}

That is, if we had 50% for the first SPAN, now we put -50% on the second SPAN and so on for the rest of the
values; with this, we will have the following effect when the hover event happens:

Thirty-seventh effect
For this purpose, we will start from the initial code of:

section1\hover37\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover37\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
115
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}

We will create an extra rounded container:

a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 100%;
border-radius: 50px;
background: #5500FF;
z-index: -1;
transition: all 0.5s;
}

When the hover event happens, we expand it:

a:hover::before{
width: 100%;
}

And with this, when the hover event happens, we will have the following effect:

116
Variants
As variants, we can indicate an extra right-aligned container:

a::before,
a::after
{
content: '';
position: absolute;
top: 0;
width: 70px;
height: 100%;
border-radius: 50px;
background: #5500FF;
z-index: -1;
transition: all 0.5s;
}

a::before{
left: 0;
}

a:hover::before{
width: 100%;
}

a::after{
right: 0;
}

a:hover::after{
width: 100%;
}

And when the hover event happens, we will have:

117
Also, you can vary by border instead of width to have a similar effect:

a::after{
right: 0;
border-style: solid;
border-color: #5500FF;
border-width: 0;
}

a:hover::after{
/* border-left-width: 70px; */
border-right-width: 70px;
}

Another variant is to also place a hover effect on the parent container, that is, the button's, to which a delay will
also be applied; finally, to the extra containers, they are hidden by opacity:

a {
***
color: #FFF;
transition: all 0.4s 0.4s;
}

a::before{
left: 0;
}

a:hover::before{
width: 140px;
opacity: 0;
}

a:hover::after{
/* border-left-width: 70px; */
border-right-width: 70px;
opacity: 0;
}

a:hover{
color: #111;

118
background: #FFF;
}

And we will have the following effect when the hover event happens:

For this variation:

● We are going to place an icon centered in the extra container of the after.
● The extra container defined by the before will be behind the extra container defined by the after, which
occupy the same space and have the same design.
● Finally, only one extra container, the before container, is expanded:

a {
***
padding: 10px 40px 10px 80px;
background: transparent;
transition: all 0.4s 0.4s;
}

a::before,
a::after
{
***
z-index: -2;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
}

a::after{
content: '‣';
z-index: -1;
}

a:hover::before{
width: 100%;
}

And we will have the following effect when the hover event happens:
119
Thirty-eighth effect
For this purpose, we will start from the initial code of:

section1\hover38\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
<span>
Button
</span>
</a>
</body>

</html>

And the base CSS:

section1\hover38\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
120
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
/* border: 4px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
background: #5500FF;
border-radius: 5px;

The SPAN is used to scroll the text only and not the background color of the button

a span{
position: relative;
right: 0;
transition: all 0.4s;
}

On hover event, the SPAN scrolls:

a:hover span{
right: 4px;
}

For the extra container, we'll define a character and align it to the right:

a::before{
content: '»';
position: absolute;
width: auto;
height: 100%;
right: -10px;
top: 2px;
font-size: 50px;
transition: all 0.4s;
opacity: 0;
}

In the hover event, we scroll the extra container a bit:

a:hover::before{

121
right: 4px;
opacity: 1;
}

And we will have the following effect when the hover event happens:

Thirty-ninth effect
For this purpose, we will start from the initial code of:

section1\hover39\index.html

And the base CSS:

section1\hover39\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
122
font-size: 40px;
/* border: 4px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
background: #5500FF;
border-radius: 5px;
}

We create two extra rounded containers, and offset them a bit to the sides; It is important to note the use of the
left, top and bottom properties to position the extra containers:

a::before{
content: '';
position: absolute;
top: 0;
left: 15%;
width: 120px;
height: 50px;
background: #5500FF;
border-radius: 50%;
transition: all 0.4s;
z-index: -2;
}

a::after{
content: '';
position: absolute;
bottom: 0;
left: 35%;
width: 120px;
height: 50px;
background: #5500FF;
border-radius: 50%;
transition: all 0.4s;
z-index: -2;
}

In the hover event, we scroll the extra containers to create a bulge:

a:hover::before{
top: -10px;
}
a:hover::after{

123
bottom: -10px;
}

And we will have the following effect when the hover event happens:

Variants
In this variant we are going to use the variant of the border-radius property:

border-radius: <V1> / <V2>;

So that the rounding is more elliptical and not so rounded; we also vary the exposure of the containers when the
hover event happens:

a::before{
***
border-radius: 100% / 30%;
}

a:hover::before{
top: -4px;
}
a::after{
content: '';
position: absolute;
bottom: 0;
left: 35%;
width: 120px;
height: 50px;
background: #5500FF;
border-radius: 100% / 30%;
transition: all 0.4s;
z-index: -2;
}

a:hover::after{

124
bottom: -4px;
}

And we will have:

Another possible variant of changing the positions of the rounded containers on the hover event:

a::before{
***
left: 10%;
}

a:hover::before{
top: -4px;
left: 35%;
}
a::after{
***
left: 35%;
}

a:hover::after{
bottom: -4px;
left: 5%;
}

Fortieth effect
For this purpose, we will start from the initial code of:

section1\hover40\index.html

<!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">
125
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">Button</a>
</body>
</html>

And the base CSS:

section1\hover40\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We will create two extra containers with a border, as you can see in the following code:

a::before,
a::after{
content: '';
position: absolute;
top: -5%;
left: 0;
width: 90%;
height: 100%;
z-index: -1;
border: 1px solid #5500FF;

126
border-radius: 2px;
transition: all 0.4s;
}

a::after{
top: 0;
left: -5%;
width: 100%;
height: 90%;
}

We vary slightly in percentages the width and height of each of the containers, so that they do not occupy the
same size, also, we move the containers to the left and up so that the borders appear centered.

In the hover event, we set the width and height to 100% of both extra containers:

a:hover:before,
a:hover:after
{
top: 0;
left: 0%;
width: 100%;
height: 100%;
}

And we will have the following effect when the hover event happens:

Variants
If we pay attention to the current structure:

127
We will see that the edges are out of square, in addition to not being proportional; to correct the first problem, we
can use translations, and for the second problem, the calc() function as it is also used in other effects:

a::before,
a::after{
***
width: calc(100% - 20px);
transform: translateX(10px) translateY(10px);
}
a::after{
***
left: -10px;
height: calc(100% - 20px);
}

a:hover:before,
a:hover:after
{
***
transform: translateX(0) translateY(0);
}

And we will have the following effect when the hover event happens:

128
A completely proportional effect, both in the position of the edges, and in the moment of translation.

Forty-first effect
For this purpose, we will start from the initial code of:

section1\hover41\index.html

And the base CSS:

section1\hover41\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
border: 1px solid #5500FF;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
border-radius: 2px;
}

129
We create an extra container:

a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
opacity: 0;
transition: all 0.5s;
z-index: -1;
}

And when the hover event happens, we rotate the container:

a:hover::before{
opacity: 1;
/*transform: rotate(20deg);*/
transform: rotate(-380deg);
}

You can give it a positive or negative rotation greater than 360 degrees so that the rectangle makes one complete
full turn before showing itself aligned; finally, in the hover event we will have:

Variants
One variant is to add another extra container with a delay and the rotation reversed:

a::before,
a::after
{
content: '';
position: absolute;
top: 0;

130
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
opacity: 0;
transition: all 0.5s;
z-index: -1;
}

a:after{
transition-delay: 0.1s;
}

a:hover::before{
opacity: 1;
/* transform: rotate(20deg); */
transform: rotate(-380deg);
}
a:hover::after{
opacity: 1;
/* transform: rotate(20deg); */
transform: rotate(380deg);
}

And we will have:

Another variant is to add more HTML elements to animate, for example, a letter and to make it easily animatable,
we place it inside a SPAN:

<span>B</span>utton</a>

Whose CSS will be the following:

to span{
131
a span{
color: transparent;
}

a span:before{
content: 'B';
color: #FFF;
position: absolute;
transition: all 0.3s;
}
a:hover span::before{
font-size: 70px;
transform: translate(-17px, -15px) rotate(360deg);
}

As you can see, the letter 'B' defined in the HTML is not being used, but in the CSS; We do this to create a more
interesting effect as we will see in this section; key points:
● We apply an absolute positioning on the extra container generated by the SPAN, to be able to perform
geometric transformations at the moment of hover.
● We use a transparent color for the SPAN to be able to hide the letter B defined in the HTML and it is
present to be able to generate a space for the extra container generated by the SPAN.

And we will have:

In CSS; we have a function called attr(), with which we can get attributes defined in the HTML:

<span data-attr="B">B</span>utton</a>
***
a span:before{
/* content: 'B'; */
content: attr(data-attr);
color: #FFF;
132
position: absolute;
transition: all 0.3s;
}

As you can see in the previous code, through the custom attribute called data-attr, we define a content, a letter 'B'
and through the SPAN selector, using the attr() function, we read the content of said attribute and set it in the
content property, giving exactly the same result as before, but with the advantage that now we define all the
content from the HTML and leave the CSS for the presentation.

Forty second effect

For this purpose, we will start from the initial code; the use of SPAN is very important since we are going to create
an extra container:

section1\hover42\index.html

<!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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<span></span>
Button</a>
</body>
</html>

And the base CSS:

section1\hover42\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;

133
font-family: roboto;
font-size: 40px;
border: 1px solid #5500FF;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
border-radius: 2px;
transition: all 0.4s;
}

In this effect, we will create 4 extra containers, two with the button and two with the SPAN defined in the HTML
using the extra containers of the button with the before and after that occupy 1/4 of the total size of the button
(25% of the maximum size), and place half at the top of the button and half at the bottom of the button:

a::before,
a::after,
span::before,
span::after {
content: '';
position: absolute;
width: 25%;
height: 100%;
z-index: -1;
background: #5500FF;
transition: all 0.1s;
}

Let's place each of the containers next to each other using the left property and place them above or below them
using the top property:

a::before {
top: 100%;
left: 0;
}

a::after {
top: -100%;
left: 25%;
transition-delay: 0.1s;
}

a span::before {
top: 100%;
left: 50%;

134
transition-delay: 0.2s;
}

a span::after {
top: -100%;
left: 75%;
transition-delay: 0.3s;
}

In practice, we have:

And we apply a delay between the animation of each component so that they are consecutive.

In the hover event, we scroll them to be visible using the top property:

a:hover::before {
top: 0;
}

a:hover::after {

135
top: 0;
}

a:hover span::before {
top: 0;
}

a:hover span::after {
top: 0;
}

Also, we can change other effects:

a:hover{
color: #111;
}

In the hover event, we scroll the containers inside the button, having the following effect:

Variants
As possible variants, you can leave the containers visible and inline:

a::before {
top: 90%;
***
}

a::after {
top: 90%;
***
}

a span::before {
top: 90%;
***
}

a span::after {
top: 90%;

136
***
}

And we will have:

The effect would be the same; we can also create circles that are visible; for instance:

a::before {
top: 35%;
***
}
a::after {
top: -33%;
***
}
a span::before {
top: 38%;
***
}
a::after {
top: -33%;
***
}

And we will have:

137
Forty-third effect
For this purpose, we will start from the initial code of:

section1\hover43\index.html

And the base CSS:

section1\hover43\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
/* border-radius: 1px; */
box-shadow: 4px 4px 0px 0px #330088;
transition: all 0.3s;
}

138
With the box-shadow:

box-shadow: 4px 4px 0px 0px #330088;

We create an extra 4 pixel container located to the right and below the container; with the before and after, we
create the extra containers:

a::before,
a::after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 100%;
height: 100%;
background: #5500FF;
transition: all 0.3s;
z-index: -1;
}

We offset the container of after by 4 pixels, so that it is displayed as if it were a top and left border; with the
z-index set to -2, we hide that extra container behind the extra before container:

a::after{
top: 0;
left: 0;
background: #330088;
z-index: -2;
}

In the hover event, we hide all the borders created by the extra container and the box-shadow container:

a:hover::before{
top: 0;
left: 0;
}
a:hover{
box-shadow: 0 0 0px 0px #330088;
}

Finally, in the hover event we will have:

139
Variants
As a variant, we can scroll the before container at the time of the hover event:

a:hover::before {
top: 100%;
left: 100%;
}

Having the following effect:

With a subtle change, we have a different effect.

Forty-fourth effect
For this purpose, we will start from the initial code of:

section1\hover44\index.html

And the base CSS:

140
section1\hover44\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We create an extra container:

a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
z-index: -1;
transition: all 0.3s;
}

For this effect, we are going to apply geometric transformations on the hover, both in scale and in rotation:

a:hover::before{
transform: scale(1) rotate(180deg);
}

And in its base state to be able to make the transition:

141
a::before{
***
transform: scale(0) rotate(0);
}

Finally, in the hover event we will have:

Forty-fifth effect
For this purpose, we will start from the initial code of:

section1\hover45\index.html

<!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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<span></span>
Button</a>
</body>
</html>

And the base CSS:

section1\hover45\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

142
a {
text-decoration: none;
color: #FFF;
font-family: roboto;
font-size: 40px;
border: 1px solid #5500FF;
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
border-radius: 1px;
transition: all 0.3s;
}

We will create two extra rounded containers aligned in the middle of the Y axis, this time, they will not occupy the
full size of the parent, if not, a fixed size; we also keep them hidden with the opacity property:

a::before,
a::after
{
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #5500FF;
transition: all 0.3s;
opacity: 0;
}

We place them at the ends and create another "extra container" using the box-shadow property:

a::before{
left: 0;
box-shadow: -80px 0 0 #5500FF;
}
a::after{
right: 0;
box-shadow: 80px 0 0 #5500FF;
}

On the hover event, we scroll them to be visible using the left and right property respectively and the opacity:

143
a:hover::before{
left: 50%;
box-shadow: 20px 0 0 #5500FF;
opacity: 1;
}
a:hover::after{
right: 50%;
box-shadow: -20px 0 0 #5500FF;
opacity: 1;
}

In the hover event we will have for now:

At the same time, we will create another transition effect with a delay or delay for the SPAN:

a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5500FF;
border-radius: 8px;
transform: scale(0);
z-index: -1;
transition: all 0.3s;
}

a:hover span{
transform: scale(1);
transition-delay: 0.3s;
}

And another optional effect for the equally delayed button color:

a:hover{
color: #111;
transition-delay: 0.3s;
}

144
Finally, in the hover event we will have:

As you can see, two effects are applied to the same button, the one provided by the extra containers and the
SPAN and the button itself.

Forty-sixth effect
For this purpose, we will start from the initial code of:

section1\hover46\index.html

And the base CSS:

section1\hover46\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
145
background: #111;
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
border-radius: 1px;
transition: all 0.3s;
}

We are going to create two extra containers of a fixed size smaller than the parent container, located in the upper
left corner and in the lower right corner:

a::before,
a::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #5500FF;
z-index: -1;
transition: all 0.2s;
}

a::before{
top: -4px;
left: -4px;
}

a::after{
bottom: -4px;
right: -4px;
}

As you can see, we offset the extra containers by -4 pixels so they can be displayed; It is important to note that
the overflow is not defined and a background is defined for the button (parent container) to show the extra
containers as if it were a border; in the hover event, we expand the total size of the container:

a:hover::before{
width: 100%;
height: 100%;
}

146
a:hover::after{
width: 100%;
height: 100%;
}

Getting the following effect on the hover event:

Variants
In this section, we will create an effect similar to the previous one, but, using the geometric transformations
instead of the width and height properties; we place an initial scale for the base state:

a::before,
a::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.2);
background: #5500FF;
z-index: -1;
transition: all 0.2s;
}

a::before{
top: -4px;
left: -4px;
transform-origin: top left;
}

a::after{
bottom: -4px;
right: -4px;
transform-origin: bottom right;
}

And in the hover event, we scale full:

a:hover::before{
transform: scale(1);

147
}

a:hover::after{
transform: scale(1);
}

In the hover event we will have exactly the same behavior, but, since we are scaling the size of the container in
percentages for width and height with the same factor, the base state varies:

Forty-seventh effect
For this purpose, we will start from the initial code of:

section1\hover47\index.html

And the base CSS:

section1\hover47\style.css

body {
height: 100vh;
background: #111;
display: flex;
148
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
/* background: #111; */
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
overflow: hidden;
border-radius: 1px;
transition: all 0.3s;
}

We will create two extra containers the size of the parent:

a::before,
a::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.2s;
}

We will create two extra containers with the size of the rotated parent, one located at the top and one at the
bottom; as you can see in the following code, we use the same configurations of the top, left, right, bottom and
transform-origin properties as in the previous example and we define a color to make them visible:

a::before{
top: 0;
left: 0;
transform-origin: top left;
background: #5500FF;
transform: rotate(45deg);
}
a::after{
bottom: 0;
right: 0;

149
transform-origin: bottom right;
background: #771100;
transform: rotate(45deg);
}

By performing the hover event, we move the extra bins back together and keep the rotation going:

a:hover::before{
transform: translateY(-100%) rotate(45deg) ;
}
a:hover::after{
transform: translateY(100%) rotate(45deg) ;
}

With this, in the hover event, we will have the following effect:

If you want it to fill the width of the button, we can increase the width of the extra containers:

a::before,
a::after{
***
width: 100%;
height: 200%;
}

And by being wider (specifically twice) we can halve the offset:

a:hover::before{
transform: translateY(-50%) rotate(45deg) ;
}
a:hover::after{
transform: translateY(50%) rotate(45deg) ;
}

Finally, in the hover event we will have:

150
Variants
As a possible variant, we can create bars or borders instead of full containers; we align one at the top and one at
the bottom:

a::before,
a::after {
content: '';
position: absolute;
width: 100%;
height: 10px;
z-index: -1;
transition: all 0.2s;
}

a::before {
top: 0;
left: 0;
transform-origin: top left;
background: #5500FF;
transform: rotate(0);
}

a::after {
bottom: 0;
right: 0;
transform-origin: bottom right;
background: #771100;
transform: rotate(0);
}

In the hover event, we apply rotations:

a:hover::before {
transform: rotate(45deg);
}

a:hover::after {
transform: rotate(45deg);
}

151
Finally, in the hover event we will have:

For this variant, we disable overflow:

a {
/* overflow: hidden; */
}

And with the two edges of the previous effect:

a::before,
a::after {
content: '';
position: absolute;
width: 100%;
height: 10px;
z-index: -1;
transition: all 0.2s;
}

a::before {
top: 0;
left: 0;
transform-origin: top left;
background: #5500FF;
}

a::after {
top:90%;
left: 0;
transform-origin: bottom right;
background: #771100;
}

In the hover event, we apply a width scale and through the left property we apply an alignment and a shadow
effect; in turn, we invert the positioning of the two edges on the top:

a:hover::before {
width: 80%;
152
left: 10%;
top:90%;
box-shadow: 0 0 2px 2px #5500FF;
}

a:hover::after {
/* transform: translateY(-9000%); */
width: 70%;
left:15%;
top:0%;
box-shadow: 0 0 2px 2px #771100;
}

Finally, in the hover event we will have:

In the event, we are going to start from the code of the previous variant and with this, the borders located
horizontally but with a smaller width; also, let's create an extra wrapper:

<a href="#">
<span></span>
Button
</a>

With which, we are going to create two vertical borders:

a span::before,
a span::after {
content: '';
position: absolute;
width: 4px;
height: 140%;
top: -20%;
transition: all 0.4s;
}

As you can see, the height is 140% greater than the parent, we use the top property to center the containers;
positioning is also applied to the ends using the left property:

a span:before{
153
left: 10%;
background: #5500FF;
}
a span:after{
left: 90%;
background: #771100;
}

And in the hover event, we flip the containers:

a:hover span:before{
left: 90%;
}
a:hover span:after{
left: 10%;
}

Finally, in the hover event we will have:

For this variant, we are going to create exactly the previous effect, without the need to use SPAN:

<a href="#">
Button
</a>

For each of the extra containers generated from the parent button or container, we are going to create borders:

a::before,
a::after {
content: '';
position: absolute;
z-index: -1;
transition: all 0.4s;
}

a::before {
left: -20%;
top:-6%;
154
width: 140%;
height: 100%;
border-top: 4px solid #5500FF;
border-bottom: 4px solid #771100;
}
a::after {
left: 0;
top:-20%;
width: 100%;
height: 140%;
border-left: 4px solid #5500FF;
border-right: 4px solid #771100;
}

And in the hover event, we apply a rotation:

a:hover:before{
transform: rotateX(180deg);
}
a:hover:after{
transform: rotateY(180deg);
}

You can rotate the extra containers in other axes, for example in the Z axis to have different effects.

Finally, in the hover event we will have the same effect as the previous variant, but without using a SPAN; as you
can see, we also apply some extra space (for example in the selector of before, to finish adjusting the positioning
of the borders with respect to the button).

Forty-eighth effect
For this purpose, we will start from the initial code of:

section1\hover48\index.html

<!DOCTYPE html>
<html lang="en">

<body>

155
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover48\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #FFF;
/* background: #111; */
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
border-radius: 1px;
transition: all 0.4s;
}

In this effect we will create two extra containers, one after the other in which only one is visible:

a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #771100;

156
transition: all 0.2s;
transform-origin: top;
}
a::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #5500FF;
transition: all 0.2s;
transform-origin: bottom;
}

In the hover event, we apply rotations, but to make it have a 3D focus, we'll apply the perspective function; with
this, we activate the 3D environment; you can vary the value assigned to said function and evaluate its behavior,
the smaller the value, the closer the 'spectator' will be defined and therefore, it will give an effect like more
stretched, and the higher the value, the further the 'spectator' will be from the container giving a more natural
effect:

a:hover:before{
transform: perspective(800px) rotateX(75deg);
}
a:hover:after{
transform: perspective(800px) rotateX(-75deg);
}

To make both containers visible, you can put some positive or negative value in the top and left; remember to
reset them on hover so that everything is completely aligned:

a::before{
top: -2px;
left: -2px;
***
}
a::after{
top: 2px;
left: 2px;
***
}
a:hover:before{
top:-5px;
left: 0;
transform: perspective(800px) rotateX(75deg);

157
}
a:hover:after{
top:5px;
left: 0;
transform: perspective(800px) rotateX(-75deg);
}

Finally, in the hover event we will have:

Forty-ninth effect
For this purpose, we will start from the initial code of:

section1\hover49\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover49\style.css

body {
height: 100vh;

158
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #5500FF;
/* background: #111; */
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
/* overflow: hidden; */
border-radius: 1px;
background: #111;
transition: all 0.4s;
}

In this rather subtle effect, we are going to create an extra container that will act as a border to the parent
container and therefore take up the entire space of the parent button or container:

a::before,
a::after {
content: '';
position: absolute;
left: -2px;
top: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: #5500FF;
transition: all 1.5s;
z-index: -2;
}

Next, we'll create a small square with a drop shadow placed on top of the border created by the extra after
container:

a::after {
opacity: 0;
width: 2px;
height: 2px;

159
background: #FFF;
box-shadow: -30px 0px 1px 1px;
z-index: 3;
}

In the hover event, we move the extra container of the after to the other end:

a:hover:after {
opacity: 1;
box-shadow: 0px 0px 1px 1px;
left: 100%;
}

At the same time, we apply a color change to the rest of the components. It is important to note that a delay was
defined in the transition of these components:

a::before {
transition-delay: 0.8s;
}
a:hover:before {
background: #FFF;
}
a:hover {
color: #FFF;
}

Finally, in the hover event we will have:

fiftieth effect
For this purpose, we will start from the initial code of:

section1\hover50\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the base CSS:

section1\hover50\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

For this purpose, we will need to create two extra containers, which occupy the entire space of the parent
container (the button) but, by default, they will not be displayed by setting the height to zero:

a::before,
a::after {

161
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(85, 0, 255, 0.4);
z-index: -2;
transition: all 0.8s;
}

We apply a delay for one of the containers, which can have other colors or no transparency:

a:before {
transition-delay: 0.4s;
}

In the hover event, we set the height to 100% so that the containers are visible; why the previous delay, we will
have a delay for one of the containers to occupy 100% of the size of the parent container:

a:hover:before,
a:hover:after {
height: 100%;
}

As always, we can change other styles:

a:hover {
color: #FFF;
}

Finally, in the hover event we will have:

Variants
There are several variants that you can do, one of them is to work with the width instead of the height:

a::before,
a::after {
***
162
/* width: 100%;
height: 0; */
width: 0;
height: 100%;
}

a:hover:before,
a:hover:after {
***
width: 100%;
/* height: 100%;*/
}

Or both at the same time:

a::before,
a::after {
***
width: 0;
height: 0;
}

a:hover:before,
a:hover:after {
width: 100%;
height: 100%;
}

Or add a box-shadow on the effect:

a::before,
a::after {
***
width: 100%;
height: 0;
box-shadow: 0px -10px 0 0 rgba(85, 0, 255, 0.4);
}
a:hover:before,
a:hover:after {
/* width: 100%; */
height: 100%;
box-shadow: 0px 0 0 0 rgba(85, 0, 255, 0.4);
}

Chapter source code:

https://github.com/libredesarrollo/curso-css-transiciones-animaciones/tree/main/section1

163
Chapter 3: Transitions and translations on images
This chapter's main objective is to put into practice some experiments evaluated in the previous section on other
types of HTML elements as a whole; therefore, we will continue working with transitions in this chapter.

We will prepare a new section that will have the following structure:

-section2
-- imgs
--- tiger.jpg

The image used:

https://pixabay.com/es/photos/eyes-tiger-white-tiger-animal-1155569/

But you can use any of your preference.

First effect
For this purpose, we will start from the initial code of:

section2\hover1\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">
<img src="../imgs/tiger.jpg">
<div class="content">
<h1>Tiger</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit quasi
nobis.</p>
</div>
</div>
164
</body>

</html>

And the base CSS:

section2\hover1\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We will create a container where we will place the image, whose main point is the use of relative positioning; that,
as we saw before with the buttons in the previous chapter, it is the central element to define hidden containers or
positioned in strategic places which allow us to perform all kinds of effects; another important point is the use of
overflow to hide the extra content:

.container {
width: 500px;
/* height: auto; */
position: relative;
overflow: hidden;
border-radius: 5px;
}

We define a base style for the image:

.container img {
width: 100%;
transition: all .5s;
}

And since displaying an image alone is very boring, we will place padding content:

.content{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;

display: flex;
165
flex-direction: column;
justify-content: center;
align-items: center;

color: #5500FF;
background: #FFF;
font-family: Roboto;

padding: 8px;

transform: translateY(100%);

transition: all 0.5s;

}

The style is basic, an absolute positioning to hide the extra container with the content, the use of the top and left
property to reposition it, the use of the flexs to align the content and finally we move the content on the Y axis to
see the same.

Style to apply a basic style to elements:

.container .content h1{

margin: 0;
color: #000;
}

.container .content p{
font-size: 20px;
}

And in the hover event, we move the content to be visible:

.container:hover .content{
transform: translateY(0);
}

At the same time, we move the image to make a more pleasant effect:

.container:hover img {
transform: translateY(-10%);
}

With this effect it is demonstrated that you can use the same structure and idea used in the previous chapter, for
the buttons, in which, we always had a relative positioning for the parents and an absolute positioning for the
children components; in practice, with these positionings, we will obtain that the absolute positioning of the child
components is relative to the positioning within the parent component and we will be able to apply all kinds of

166
effects to the child components to have the palette of previous animations. All this logic was transferred to more
complex HTML structures, but always maintaining the bases mentioned above.

Finally, in the hover event we will have:

Second effect
For this purpose, we will start from the initial code of:

section2\hover2\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">
<img src="../imgs/tiger.jpg">
<div class="content">
<h1>Tiger</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit quasi
nobis.</p>
</div>
</div>

</body>
167
</html>

And the base CSS:

section2\hover2\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

This effect will be similar to the previous one, but now the extra container will take up all the space of the parent;
through the top property, we will hide it; otherwise, it has a similar structure to the previous effect:

.content {
position: absolute;
top: 100%;
left: 0;
height: 100%;
width: 100%;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

color: #FFF;
background-color: rgba(85, 0, 255, 0.6);
padding: 8px;
transform: translateY(100%);
font-family: Roboto;

transition: all 0.5s;

}

For the parent container, we will place a default height and in order not to distort the image with the scaling of the
container, we will apply an object-fit of type cover:

.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
168
border-radius: 5px;
}

.container img {
width: 100%;
object-fit: cover;
transition: all .5s;
border-radius: 5px;
}

In the hover event, we move the extra content container to be visible using the top property:

.container:hover .content {
top: 0;
transform: translateY(0);
}

.container:hover img {
transform: translateY(-2%);
}

As you can see, we also moved the image a bit for an interesting and more complex effect.

In addition to the code above, we can set a delayed animation for the content:

.container .content h1,

.container .content p {
margin: 0;
transform: translateY(-8px);
opacity: 0;
transition: all 0.5s;
}

.container .content p {
font-size: 20px;
}
.container:hover .content h1,
.container:hover .content p {

transform: translateY(0);
opacity: 1;
transition-delay: 0.6s;
}

169
As you can see from the previous code, apart from applying margins and font sizes as a base style, we apply a
translation and opacity by default, which in the hover event with a delay of less than a second, we show after
completing the effect of the extra content container.

Finally, in the hover event we will have:

Hover effect: Geometric transformations

For this effect, we will start from the initial code of the previous effect:

section2\hover2\index.html
section2\hover2\style.css

We clone the previous exercise:

section2\hover02_con\index.html
section2\hover02_con\style.css

With the examples seen so far in this chapter, we can see that the effects shown have a one-to-one relationship
with the button-based effects seen in chapter 1; therefore, you can apply the same considerations and effects that
we saw in the previous chapter to any HTML composition you have in your project; for example, in this section
that we want to deal with geometric transformations, you could apply transformations to your hover effects, as we
have done previously; to make a compilation, we would have:

.container:hover .content {
top: 3%;
left: 3%;
transform: translateY(-2%) scale(1.2) rotate(-15deg);
}

.container:hover img {
transform: translateY(-2%) scale(1.8) rotate(30deg);
}

Finally, in the hover event we will have:

170
And it is important to clarify again that you can use any of the combinations seen before, and in this experiment
we just want to make that point clear.

Hover effect: Extra containers

For this effect, we will start from the initial code of the previous effect:

section2\hover2\index.html
section2\hover2\style.css

We clone the previous exercise:

section2\hover02_trans\index.html
section2\hover02_trans\style.css

The extra containers, we created with the before and after selectors in the previous chapter, can be used without
problems, either in the container:

.container::before{
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
171
}

In the hover event we will have:

Or in the content:

.content::before{
content:'';
position: absolute;
width: 100%;
height: 100%;
top: -3px;
left: -3px;
background: rgba(0, 0, 0, .5);
}
.container:hover .content {
top: 3%;
left: 3%;
/* transform: translateY(-2%) scale(1.2) rotate(-15deg);; */
}

In the hover event we will have:

172
In conclusion, remember that there are no stipulated rules that we must follow regarding the CSS effects applied
to any type of element or HTML structure, you can use the effects seen in this guide at will, combine them, vary
them and of course, create your own.

Chapter source code:

https://github.com/libredesarrollo/curso-css-transiciones-animaciones/tree/main/section2

173
Chapter 4: Various effects with CSS, transitions
and filters
In this chapter, we are going to present different examples of effects in CSS with the hover event; that is, we will
continue to use CSS transitions as we did in the previous chapter; for these examples, we will use any kind of
HTML structure other than buttons as in the previous chapter.

First effect: Filled Text

For this purpose, we will start from the initial code of:

section3\hover1\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

</html>

And the base CSS:

section3\hover1\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

174
We are going to create a color translation effect between a text; to do this, we will give a base style to the text to
which we want to apply the effect:

h1{
position: relative;
margin: 0;
padding: 0;
font-size: 60px;
color: #CCC;
text-transform: uppercase;
font-family: roboto;
}

How can you evaluate in the previous code, when using a relative positioning, the H1 will be the parent container
where we will place an extra container, which in this opportunity, will not have any type of padding, only a text,
which must be exactly the same as the text used in the HTML; otherwise, we align the content to absolute
positioning so that it can be positioned independently of the main text (parent container):

h1::before{
content: 'TEXT';
position: absolute;
top: 0;
left: 0;
color: #5500FF;
width: 0;
overflow: hidden;
transition: all 0.5s;
}

To the extra container, we define a different text color than the parent container and we hide its content using the
width property; in the hover event, we display the content:

h1:hover::before{
width: 100%;
}

Finally, in the hover event we will have:

Variants
You can various aspects such as indicating the height instead of the width:
175
h1::before{
***
width: 100%;
height: 0;
}

h1:hover::before{
height: 100%;
}

And to have:

Or use both:

h1::before{
***
width: 0;
height: 0;
}

h1:hover::before{
height: 100%;
width: 100%;
}

And to have:

Second effect: Smoke Text

For this purpose, we will start from the initial code of:

section3\hover2\index.html

<!DOCTYPE html>
<html lang="es">
176
<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

</html>

And the base CSS:

section3\hover2\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We define a base CSS to eliminate the spacing, the bullets of the list and the positioning:

ul{
margin: 0;
padding: 0;
display: flex;
}

ul li{
list-style: none;
color: #FFF;
font-size: 60px;

177
font-weight: bold;
letter-spacing: 15px;
transition: all 2s;
}

For this effect, we will use the CSS blur() function which allows us to apply a gaussian blur type filter which
receives a value as a parameter with which we can indicate the radius of the blur; you can get more information
at:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur

To get the fade effect we want, we'll use translations and rotations in conjunction with the blur() function:

ul:hover li{
transform: rotate(50deg) translateY(-180px);
opacity: 0;
filter: blur(30px);
}

Also, we will apply a delay for each letter of the text defined earlier in the list:

ul li:nth-child(1){
transition-delay: 0;
}
ul li:nth-child(2){
transition-delay: 0.3s;
}
ul li:nth-child(3){
transition-delay: 0.6s;
}
ul li:nth-child(4){
transition-delay: 0.9s;
}

Finally, in the hover event we will have:

178
Try varying the angle of the rotation and/or translation in the hover event, with other positive and negative values.

Variants
You can several aspects such as the geometric transformation to use and optionally, remove the opacity:

ul:hover li{
transform: scale(0);
/* opacity: 0; */
filter: blur(30px);
}

And to have:

Or apply a different scale and/or indicate the hover event for each letter individually; with this, there is no need to
indicate a delay independently for each letter:

ul li{
list-style: none;
color: #FFF;
font-size: 60px;
font-weight: bold;
letter-spacing: 15px;
transition: all 0.5s;
}

ul li:hover{
transform: scale(1.5);
/* opacity: 0; */
filter: blur(5px);
}

/* ul li:nth-child(1){
transition-delay: 0;
}
ul li:nth-child(2){
transition-delay: 0.3s;

179
}
ul li:nth-child(3){
transition-delay: 0.6s;
}
ul li:nth-child(4){
transition-delay: 0.9s;
} */

And to have:

Third effect: Menu

For this purpose, we will start from the initial code of:

section3\hover5\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</body>

180
</html>

And the base CSS:

section3\hover5\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

This effect will be exactly the second effect presented in chapter 1 but, adapted to a menu, with this, we
demonstrate that we can use any of the effects seen in chapter 1 to adapt (for example) to a menu; first, we create
the base structure of a menu, in which each item will have a fixed size:

ul{
margin: 0;
padding: 0;
display: flex;
}

ul li{
width: 120px;
height: 20px;
font-family: roboto;
font-size: 15px;
list-style: none;
letter-spacing: 10px;

position: relative;
overflow: hidden;

display: flex;
justify-content: center;

transition: all 0.3s;

}

We create the two extra containers that will be positioned at the top right and bottom and left respectively:

ul li::before{
content: '';
width: 100%;
181
height: 100%;
/* border-radius: 20px; */
background-color: #002299;

position: absolute;
right: 100%;
top: 50%;
/* top: 18px; */

transition: all 0.3s;

z-index:-1
}

ul li::after{
content: '';
width: 100%;
height: 100%;
/* border-radius: 20px; */
background-color: #5500FF;

position: absolute;
left: 100%;
top: -50%;
/* top: -18px; */

transition: all 0.3s;

As you can see in the previous code, you can also indicate the positioning in pixels with the top and leave a fixed
size to simulate a border; in the hover event, we scroll the two containers so that they are visible:

ul li:hover:before{
right: 0;
/* top:50%; */
}

ul li:hover:after{
left: 0;
/* top:-50%; */
}

For the link, we can also apply a base style:

ul li a{
color: #262626;

182
text-decoration: none;
transition: all 0.3s;
}

ul li a:hover {
color: #FFF;
}

Finally, in the hover event we will have:

Fourth effect: Gradient text

For this purpose, we will start from the initial code of:

section3\hover6\index.html

183
And the base CSS:

section3\hover6\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We will define a basic CSS for the H1, which is the element that we are going to animate through the transitions:

h1 {
font-size: 60px;
text-transform: uppercase;
font-weight: bold;
font-family: roboto;
background: linear-gradient(90deg, #00FF55 5%, #5500FF 30%, #00FF55 80%);
background-size: 200% auto;
color: #fff;

background-clip: text;
-webkit-background-clip: text;

text-fill-color: transparent;
-webkit-text-fill-color: transparent;
transition: all 5s;
}

As important points, we have:

We create a linear type dislike with an angle of 90 degrees:

linear-gradient(90deg, #00FF55 5%, #5500FF 30%, #00FF55 80%);

You can customize it to your liking along with the colors; to do this, as a recommendation, you can use the tool
provided by the browser's developer console:

184
You can try other angles (although if you place the gradient aligned horizontally, the effect won't be noticeable) or
put values like: up right instead of a numerical value.

We indicate a size of triple (although you can customize it to your liking, defining a size of greater or lesser
dimensions) so that a part of it is not visible, which is the section that we are going to animate, although, if it were
of a size less than 100 %, the gradient simply repeats to fill the entire spacing of the parent:

background-size: 200% auto;

The color that we want to apply in the background property, be it to the text color and not to the background, we
use the following property:

background-clip: text;
-webkit-background-clip: text;

And to be able to apply the fill color of the characters with the specified background color:

text-fill-color: transparent;
-webkit-text-fill-color: transparent;

These last two properties are not yet fully supported by modern browsers, that is why the color property is also
used in case any of this are not yet supported.

And in the hover event, we scroll the background by positioning it:

h1:hover {
background-position: 200% center;
}

Finally, in the hover event we will have:

185
Fifth effect: Text multiplied
For this purpose, we will start from the initial code of:

section3\hover7\index.html

<!DOCTYPE html>
<html lang="en">

<body>

</body>

</html>

In which, as you can see, we indicate several H1 with a different color; for the base CSS:

section3\hover7\style.css

body {
height: 100vh;
background: #111;
display: flex;

186
justify-content: center;
align-items: center;
font-family: Roboto;
}

In order to animate each of the texts together with the transitions, we need a parent container to which we can
apply the hover event; for it:

div.container {
position: relative;
width: 100%;
height: 100%;
}

For the H1, which are the texts that we want to animate together, they are aligned in the middle and a base CSS:

h1 {
position: absolute;
top: 50%;
left: 50%;
font-size: 200px;
transform: translate(-50%, -50%);

font-family: roboto;
text-stroke-width: 4px;
-webkit-text-stroke-width: 4px;
text-stroke-color: black;
-webkit-text-stroke-color: black;
transition: all 1s;
}

We use the property of:

-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: black;

To apply a path to black text.

We apply a delay for each of the texts:

h1:nth-child(1) {
transition-delay: 0.6s;
}

h1:nth-child(2) {
transition-delay: 0.4s;
}
187
h1:nth-child(3) {
transition-delay: 0.2s;
}

h1:nth-child(4) {
transition-delay: 0.1s;
}

And through the parent container, in the hover event, we apply the following transformations:

div.container:hover h1{
transform: translate(-50%,-90%) scale(1.4);
}

Here it is important to note the use of the DIV container as a parent container which, when applied to the hover
event, move all the child containers (H1) and not just the H1 affected by a hover event:

h1:hover{
transform: translate(-50%,-90%) scale(1.4);
}

Since, otherwise (directly affecting H1 -h1:hover-) it would give a very different effect that would not be the
desired one.

Finally, in the hover event we will have:

Sixth effect: Neon Text

For this purpose, we will start from the initial code of:

section3\hover8\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<h1>DesarrolloLibre</h1>
</body>

</html>

And the base CSS:

section3\hover8\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}
h1{
color:#000;
font-size: 40px;
font-weight: bold;
font-family: roboto;
transition: all 1s;
}

To obtain the neon effect, all we have to do is, using the text-shadow property, multiply it several times by the
radius of the blur:

h1:hover{
color: #FFF;
text-shadow: 0 0 10px #5500FF, 0 0 20px #5500FF, 0 0 30px #5500FF, 0 0 40px #5500FF, 0
0 50px #5500FF;
}

As you can see, several levels of blur are used (in the example above five are used) and with this, we have the
desired effect at the time of the hover event:

189
Seven effect: Bounce text
For this purpose, we will start from the initial code of:

section3\hover9\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>
<body>
<h1>DesarrolloLibre</h1>
</body>
</html>

And the base CSS:

section3\hover9\style.css

190
body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

In this effect, we will simulate in a very basic way the bounce effect using the transitions; for the warp effect, we'll
use scale by (at least applied to one of its axes) and translate to shift the HTML element a bit:

h1 {
***
transition: all 1s;
}
h1:hover {
transform: scaleX(1.3) translateY(20px);
}

You can try other times and deformations and evaluate the result:

h1 {
***
transition: all 1s;
}
h1:hover {
transform: scaleX(1.3) translateY(20px);
}

One of the problems we have is the deformation of the element (imagine a ball that makes contact with the wall
and just at that moment of contact, the ball deforms a little) is that the deformation (scaleX) starts right at the
beginning of animation, behavior that is not very natural, and using transitions, little can be done to solve this
problem. To obtain a more realistic effect, an extra or parent container could be used to which the deformation is
applied at the right time through a delay:

<div class="container">
<h1>DesarrolloLibre</h1>
</div>
***
.container {
transition: all 0.3s;
transition-delay: 0.7s;
}

.container:hover {
transform: scaleX(1.3);
}
191
As you can see in the CSS above, an extra wrapper is used to start the warp some time after the translation of the
element starts; although, in practice, the effect does not end up behaving in the expected way; giving an
unrealistic warp at the end of the animation.

Another problem with the above "solution" is that additional HTML is needed to complete an effect in CSS; In
these cases and for this type of compound effects, it is a better strategy to use animations as we will see from the
next chapter to make changes to our HTML elements precisely at the time we need.

Another detail that we must take into account is the speed of the animation, which we can control through the
speed curves; a constant curve like the following:

192
It means that it is a linear transition, like the one we have used so far:

transition-timing-function: linear;

A more realistic effect for a rebound effect is that, at the beginning it starts slowly (since the object is being
thrown) it gains speed in the middle and at the end, it begins to slow down (due to the effect of contact with a wall
-by example- or by gravity); namely:
● Start: Start slow (slow).
● Medium: Gain speed (fast).
● Finish: finish slow (slow).

This behavior is to give an example and you can customize the speed to your liking, depending on the effect you
want to obtain; the important thing is to understand that, for many purposes, it would be necessary to vary the
speed of the animation performed at the time of the hover event.

To customize the speed, we use the transition-timing-function property indicating a curve or some predefined
property like the following:
● ease - Specifies a transition effect with a slow start, then fast, then slow end (this is the default).
● linear - Specifies a transition effect with the same speed from start to finish.
● ease-in - Specifies a transition effect with a slow start.
● ease-out - Specifies a transition effect with a slow ending.
● ease-in-out - Specifies a transition effect with a slow start and end.
● cubic-bezier(n,n,n,n) - Allows you to define your own values in a cubic-bezier function.

You can practice from the tool offered by the browser's developer console to understand how speed curves work:

193
As you can see in the previous image, the steeper the curve, the faster the animation will be; you can also
guide yourself with the represented circles, that when moving the curve from the tool, we have an animation with
the circles; also, the closer the circles are to each other, the slower the animation:

The fewer circles there are in the same amount of time, the faster the animation will be.

With this we introduce the use of speed curves in animations, which can be applied both for transitions and
animations as we will see in the following chapters; in addition to, knowing in another example, the limitations we
have when we want to work with an effect in which we want it to have a more personalized behavior.

Chapter source code:

https://github.com/libredesarrollo/curso-css-transiciones-animaciones/tree/main/section3

194
Chapter 5: Creative animations
In this chapter, we are going to work with animations, animations applied to all kinds of elements and structures in
HTML; also, we'll use transitions in conjunction with animations, we'll look at different features of animations and
different approaches.

First effect: Gradient text

Let's start from the source code created in chapter 3, exercise 6:

section4\ani1\index.html

<!DOCTYPE html>
<html lang="es">

<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>Transiciones CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
<h1>DesarrolloLibre</h1>
</body>

</html>

And the basic CSS:

section4\ani1\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

h1 {
font-size: 60px;
text-transform: uppercase;
195
font-family: roboto;
font-weight: bold;

background: linear-gradient(90deg, #00FF55 5%, #5500FF 30%, #00FF55 80%);

background-size: 200% auto;

background-clip: text;
-webkit-background-clip: text;

text-fill-color:transparent;
-webkit-text-fill-color:transparent;

transition: all 5s;

}

h1:hover {
background-position: 200% center;
}

Let's convert this experiment to an animation; to do this, we remove the transition and the hover event:

h1 {
***
transition: all 5s;
}

h1:hover {
background-position: 200% center;
}

We define the animation using the keyframes:

@keyframes textbg {
to {
background-position: 200% center;
}
}

We define the animation property:

h1 {
animation: textbg 1.5s linear infinite;
}

And we will have the same effect, but applied permanently.

196
Second effect: Path
Let's start from the source code created in chapter 1, exercise 49:

section4\ani2\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

And the basic CSS:

section4\ani2\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #5500FF;
/* background: #111; */
font-family: roboto;
font-size: 40px;
/* border: 1px solid #5500FF; */
font-weight: bold;
letter-spacing: 0;
padding: 10px 40px;
position: relative;
197
/* overflow: hidden; */
border-radius: 1px;
background: #111;
transition: all 0.4s;
}

a::before,
a::after {
content: '';
position: absolute;
left: -2px;
top: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: #5500FF;
transition: all 1.5s;
z-index: -2;
}

a::before {
transition-delay: 0.8s;
}

a::after {
opacity: 0;
width: 2px;
height: 2px;
background: #FFF;
box-shadow: -30px 0px 1px 1px;
z-index: 3;
}

a:hover:after {
opacity: 1;
box-shadow: 0px 0px 1px 1px;
left: 100%;
}

a:hover:before {
background: #FFF;
}

a:hover {
color: #FFF;
}

198
We remove the transitions along with the hover event:

a:hover:after {
opacity: 1;
box-shadow: 0px 0px 1px 1px;
left: 100%;
}

We want to obtain the same behavior of the previous effect, but, completing the route, before starting to make the
animations, it is important to analyze the structure that we want to build, in the case of this animation, it is to go
through the rectangle formed by the square, for this reason, 4 steps will be necessary, which we present below, for
the purposes of this example and to make the route clearer, we are going to increase its size and place a striking
color in the square that is going to animate the route:

Step 1:

a:after {
left: -2px;
top: -2px;
}

Step 2:

a:after {
left: 100%;
top: -2px;
}

199
Step 3:

a:after {
left: 100%;
top: 100%;
}

Step 4:

a:after {
left: 100%;
top: -2px;
}

These steps are our animation keyframes and we also have its values; let's remember that the animation goes
from 0% to 100% and we have 4 steps, therefore:

@keyframes square {
0% {
opacity: 1;
left: -2px;
top: -2px;
}

25% {
opacity: 1;
left: 100%;

200
top: -2px;
}

50% {
opacity: 1;
left: 100%;
top: 100%;
}

75% {
opacity: 1;
left: -2px;
top: 100%;
}
100% {
opacity: 1;
left: -2px;
top: -2px;
}
}

For now, we removed the shadow to make the effect easier; also, you can notice that we define 5 steps, where
step one and step five are the same:

0% {
opacity: 1;
left: -2px;
top: -2px;
}

100% {
opacity: 1;
left: -2px;
top: -2px;
}

This is done in this way to close the loop right where the animation starts and have a smooth effect when starting
the animation again through the infinite loop.

We place the property of the animation on the extra container:

a::after {
animation: square 2s linear infinite;
}

You can try other values of the animation, for example, that it only repeat once:

201
a::after {
animation: square 2s linear 1;
}

Nothing prevents us from placing the animation at the time of the hover event and removing it from the extra
container:

a::after {
***
animation: square 2s linear infinite;
}

a:hover::after {
animation: square 2s linear infinite;
}

This time, we completed the exercise as we wanted it when we defined the transition, but using the animations
instead; as you can see, we have a better effect and we are not so limited in terms of the movement of the square
around the button, since, by being able to define the keyframes, we can have a higher level of customization on
our transitions or animations; also, be able to use the animations in the element selector and in the hover event.

Shadow
For the shadow that we had disabled, we could carry out a similar configuration, detect at which points we want to
animate it; let's remember that the purpose of the shadow is to follow the square generated by the extra container
of the after; worse, the inconvenience that exists is that the shadow would have to be moved on the X axis,
whether it was positive or not:

box-shadow: -30px 0px 1px 1px #F00;

Y on the Y axis, whether positive or not:

box-shadow: 0px 30px 1px 1px #F00;

The effect of the shadow would be the same, moving to one of the sides and reducing the distance between the
shadow and the extra container; in addition to, move the shadow again in the Y axis, at the end of the initial
displacement in the X axis; there are several steps that would have to be completed in a single animation that will
be combined with the displacement; a possible approach would be the following:

@keyframes square {
0% {
box-shadow: -30px 0px 1px 1px;
top: -2px;
left: -2px;
}

202
25% {
box-shadow: 0px 0px 1px 1px;
top: -2px;
left: 100%;
}

50% {
box-shadow: 0px 30px 1px 1px;
top: 100%;
left: 100%;
}

75% {
box-shadow: 0px 0 1px 1px;
top: 100%;
left: -2px;
}

100% {
box-shadow: -30px 0 1px 1px;
top: -2px;
left: -2px;
}
}

In the end, we have a diagonal that goes from the shadow to the extra container and it is precisely due to the fact
that more keyframes are needed to obtain the desired effect; or look for another strategy like using a different
animation or the same animation but with a delay; when wanting to use another animation, we must do it in
another HTML element:

<a href="#">Button
<span></span>
</a>

With this, we have another HTML element that can be animated; this SPAN will serve as a shadow for the effect
we want to build; for this animation, you want it to have the same path as the original animation called "square";
therefore, we can use the same, but using a delay:

a span {
content: '';
top: -2px;
left: -2px;
position: absolute;
width: 10px;
height: 10px;
background: #FFF;

203
}

a:hover span {
animation: square 2s linear infinite;
animation-delay: .1s;
}

And we will have:

Third effect: Multiplied text

Let's start from the source code created in chapter 3, exercise 7:

section4\ani3\index.html

<!DOCTYPE html>
<html lang="en">

<body>

</body>

204
</html>

And the base CSS will be the same as the one used before, but, removing the transition:

section4\ani3\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

.container {
width: 100%;
height: 100%;
}

h1 {
position: absolute;
top: 50%;
left: 50%;
font-size: 200px;
transform: translate(-50%, -50%);

font-family: roboto;
text-stroke-width: 4px;
-webkit-text-stroke-width: 4px;
text-stroke-color: black;
-webkit-text-stroke-color: black;
/* transition: all 1s; */
}

Let's remove all references to the use of transitions and place the animation:

h1 {
***
animation: wave 5s ease-in-out infinite;
transition: all 1s;
}

In the case of the delay of the transitions for the H1, we will convert them into a delay for the animations:

h1:nth-child(1) {
animation-delay: 0.6s;

205
}

h1:nth-child(2) {
animation-delay: 0.4s;
}

h1:nth-child(3) {
animation-delay: 0.2s;
}

h1:nth-child(4) {
animation-delay: 0.1s;
}

You can create any type of animation, in this case, we create a completely random animation in terms of the
applied geometric transformations:

@keyframes wave {

40%,
0% {
transform: translate(-50%, -50%);
}

100%,
80%,
10% {
transform: translate(-50%, -90%) scale(1.4);
}

55%,
70%,
20% {
transform: translate(-40%, -80%) scale(1.3);
}

60% {
transform: translate(-65%, -50%) scale(1.1);
}

30%,
90% {
transform: translate(-25%, -20%) scale(1.3);
}

206
You can notice the application of the same rules for different keyframes:

55%,
70%,
20% {
transform: translate(-40%, -80%) scale(1.3);
}

Of course, you can customize the animation to suit your needs; indicate more keyframes or key moments, vary
the time, the transformations, the curve, etc; for this exercise, we will have a "random" move according to the rules
specified above.'

Fourth effect: Rotating Text

For this effect, we will start from the initial code of:

section4\ani4\index.html

<!DOCTYPE html>
<html lang="en">

</html>

As you can see, for this effect, we need to process each letter separately; regarding the base CSS:

section4\ani4\style.css

body {
height: 100vh;
background: #111;
207
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

For this bounce effect, we're going to animate each letter separately; to be able to handle them easily, we put the
text in a container:

.rebound {
display: flex;
font-size: 70px;
font-weight: bold;
font-family: 'roboto';
}

And we define the base style of each letter:

.rebound span {
color: #7733FF;
text-shadow: 0 3px #5500FF, 0 5px #5500FF, 0 7px #5500FF;
}

Each letter will have a delay in the animation as you can evaluate in the following rules:

.rebound span:nth-child(1) {
animation: bounce 1s ease infinite;
}

.rebound span:nth-child(2) {
animation: bounce 1s ease infinite .1s;
}

.rebound span:nth-child(3) {
animation: bounce 1s ease infinite .2s;
}

.rebound span:nth-child(4) {
animation: bounce 1s ease infinite .3s;
}

The animation property has multiple definitions, the one we used above would be:

animation: bounce 1s ease infinite .1s;

animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.1s;
208
animation-iteration-count: infinite;
animation-name: bounce;

The animation itself consists of the following steps:

1. Scale the letter on the X and Y axis so that it appears stretched.
2. We move the letter on the Y axis.
3. We return to the initial scheme.

The following animation, is thinking about the steps explained above; of course, we define more than three
keyframes to make a more elaborate animation:

@keyframes bounce {
0% {
transform: scale(1, 1) translateY(0);
}

10% {
transform: scale(1.2, .8) translateY(0);
}

30% {
transform: scale(.8, 1.2) translateY(-70px);
}

50% {
transform: scale(1.05, .95) translateY(0);
}

55% {
transform: scale(1, 1) translateY(-10px);
}

100% {
transform: scale(1, 1) translateY(0);
}
}

Shadow
To make the animation more interesting, we are going to define a shadow, which will also move as the letter
moves, also giving a bounce effect like with the text; for this, since we have 4 letters and it is only possible to
create two shadows through the DIV with rebound class, we need to create another DIV:

Of course, if you need to define more shadows for more letters, you must create more DIVs like the previous one.

In order to align the shadows easily, we are going to define a relative type positioning and a spacing between the
letters:

.rebound {
position: relative;
letter-spacing: 18px;
***
}

We will create the 4 extra containers for the shadows for the 4 letters:

.rebound:before,
.rebound:after,
.shadow:before,
.shadow:after {
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
width: 50px;
height: 5px;
border-radius: 50%;
top: 90px;
z-index: -1;
left: -5px;
animation: scale 1s linear infinite;
}

We place the positioning just below the letter and define the animation with a delay for each letter:

.rebound:after {
left: 57px;
animation: scale 1s linear infinite .1s;
}

.shadow:before {
left: 116px;
animation: scale 1s linear infinite .2s;
}

.shadow:after {

210
left: 178px;
animation: scale 1s linear infinite .3s;
}

Finally, the animation with the scaling in the X axis to vary the size of the shadow each time the letter bounces:

@keyframes scale {
0% {
transform: scaleX(1);
}

25% {
transform: scaleX(0.4);
}

50% {
transform: scaleX(1);
}

75% {
transform: scaleX(0.9);
}

100% {
transform: scaleX(1);
}
}

Giving together the following effect:

211
In this effect, it is important to note the synchronization between both animations, both in time, as well as in the
definition of the keyframes, as well as in the delays.

Fifth effect: Rotating text

For this effect, we will start from the initial code of:

section4\ani5\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the basic CSS:

section4\ani5\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

For this effect, we are going to create a 3D text, for this, we will use several levels of shadow:

h1 {
color: #FFF;
font-family: roboto;
font-size: 90px;
letter-spacing: 20px;
text-shadow: 0 1px 0 #FFF,

212
0 2px 0 #FFF,
0 3px 0 #FFF,
0 4px 0 #FFF;
}

And a main shadow, which will actually act giving the shadow effect:

h1 {
***
text-shadow: 0 1px 0 #FFF,
0 2px 0 #FFF,
0 3px 0 #FFF,
0 4px 0 #FFF,
10px 20px 5px rgba(255, 255, 255, .2);
***
}

We indicate the typical animation:

h1 {
***
animation: rotate 2s linear infinite;
}

And the animation looks like the following:

@keyframes rotate {
from {
transform: rotate(15deg);
}

to {
transform: rotate(-15deg);
}
}

So that the animation is not abrupt when it ends and therefore, the animation goes back when it ends, we are
going to define the following rule:

h1 {
***
animation: rotate 2s linear infinite;
animation-direction: alternate;
}

With this, we will have a rotation effect for the text:

213
Sixth effect: Rotary button
For this effect, we will start from the initial code of:

section4\ani6\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the basic CSS:

section4\ani6\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;

214
align-items: center;
font-family: Roboto;
}
a {
text-decoration: none;
color: #5500FF;
font-family: roboto;
font-size: 45px;
border: 5px solid #5500FF;
font-weight: 300;
letter-spacing: 0;
padding: 20px 40px;
position: relative;
transition: color 800ms 200ms;
overflow: hidden;
transition: all .45s;
border-radius: 2px;
transition: all 0.5s
/* animation: rotate 0.3s linear 1; */
}

In this experiment, we'll look at using animations and transitions together; just like the previous effect, we are
going to rotate the content, which in this case is a button like the one in the transitions section:

@keyframes rotate {
25% {
transform: rotate(15deg);
}

50% {
transform: rotate(-15deg);
}

75% {
transform: rotate(7deg);
}

100% {
transform: rotate(-7deg);
}
}

And in the hover event, we will apply both the transitions and animations:

a:hover {
color: #FFF;

215
border: 5px solid #FFF;
animation: rotate 0.5s linear 1;
}

Finally, at the time of the hover event we will have:

Seventh effect: Extendable button

For this effect, we will start from the initial code of:

section4\ani7\index.html

<!DOCTYPE html>
<html lang="en">

<body>

<button>
<span>Submit</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0
01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268
0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745
3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0
216
013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043
3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>
</button>

</body>

</html>

We can use any SVG icon or not; in the case of the previous SVG, it is from the heroicons.com website; for the
base CSS:

section4\ani7\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We apply a style for the fixed size button:

button {
width: 600px;
height: 200px;
border-radius: 100px;
background: #fff;
position: relative;
border: 5px solid #5500FF
}

And for the SPAN, which represents the text, also a base style:

button>span {
font-size: 70px;
color: #5500FF
}

And the SVG, which will be together with the SPAN, which represents the text of the button, we will place an
absolute and hidden positioning through the opacity so that it is not visible in the base state of the button:

svg {
position: absolute;
top: 0;
217
left: 0;
opacity: 0;
color: #FFF;
}

For the event, we apply the animations, you can use the hover event, but, for this effect, we want to animate it
when the click event occurs; to do this, we can use the focus event; for the button, we use the button body stretch
animation:

button:focus {
animation: extend 1s linear;
animation-fill-mode: forwards
}

For the SPAN, we will apply another animation that will allow us to hide the text:

button:focus>span {
animation: hide 1s linear;
animation-fill-mode: forwards
}

For the SVG, we apply just the opposite, show the SVG:

button:focus>svg {
animation: show 1s linear;
animation-fill-mode: forwards
}

With the rule of:

animation-fill-mode: forwards

It is established that when the CSS animation is finished, the styles will be applied.

Finally, each of the animations that run at the same time without delay which allow you to change the width of the
button body (and its background color), hide and show an HTML element respectively:

@keyframes extend {
0% {
width: 600px;
height: 200px;
border-radius: 100px;
}

20% {
width: 600px;
height: 200px;
218
background: #5500FF;

100% {
width: 200px;
height: 200px;
border-radius: 100px;
background: #5500FF;

}
}

@keyframes hide {
0% {
opacity: 1;
}

30% {
color: #fff;
}

100% {
opacity: 0;
}
}

@keyframes show {

0%,
70% {
opacity: 0;
}

100% {
opacity: 1;
}
}

Finally, at the time of the hover event we will have:

219
Eighth effect: Light text
For this effect, we will start from the initial code of:

section4\ani8\index.html

<!DOCTYPE html>
<html lang="en">

</html>

220
And the basic CSS:

section4\ani8\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We align the list in a row:

ul {
margin: 0;
padding: 0;
display: flex;
}

ul li {
list-style: none;
color: #444;
font-size: 80px;
letter-spacing: 15px;
animation: light 1.5s linear infinite;
}

We apply animation delays for letters:

ul li:nth-child(1) {
animation-delay: 0;
}

ul li:nth-child(2) {
animation-delay: 0.1s;
}

ul li:nth-child(3) {
animation-delay: 0.2s;
}

ul li:nth-child(4) {
animation-delay: 0.3s;
}

221
ul li:nth-child(5) {
animation-delay: 0.4s;
}

And in the animation, we apply the effect, for this experiment, we will apply an effect similar to the one we applied
in chapter 4 exercise 6, using the text-shadow property to simulate a light:

@keyframes light {

0%,
80% {
transform: rotate(15deg);
}

90% {
transform: rotate(7deg);
color: #FFF;
text-shadow: 0 0 10px #5500FF, 0 0 20px #5500FF, 0 0 30px #5500FF, 0 0 40px
#5500FF, 0 0 50px #5500FF;
}

100% {
transform: rotate(0deg);
color: #FFF;
text-shadow: 0 0 10px #5500FF, 0 0 20px #5500FF, 0 0 30px #5500FF, 0 0 40px
#5500FF, 0 0 50px #5500FF;
}
}

Also, you can include other rules, as in this case it is the transformations through rotations, text color, etc; finally,
we have the following effect:

A variant that you can obtain with this effect is to turn on one letter at a time; To do this, we must synchronize the
animation time with the delay; if we set the animation to last one second:

ul li {
***
animation: light 1s linear infinite;
222
}

@keyframes light {

0%,
80% {
/* transform: rotate(15deg); */
text-shadow: none;
}

90% {
/* transform: rotate(7deg); */
color: #555;
text-shadow: none;
}

100% {
/* transform: rotate(0deg); */
color: #5500FF;
text-shadow: 0 0 10px #5500FF, 0 0 20px #5500FF, 0 0 30px #5500FF, 0 0 40px
#5500FF, 0 0 50px #5500FF;
}
}

And we evaluate the body of the previous animation, we will see that in ninety percent of it, it does not use the
text-shadow property to make the light; only at the end, therefore, of a second that the animation lasts, only 0.1
seconds is that the letter lights up; If we accompany this with the delay, we will have a slightly different effect:

Of course, you can add other CSS properties as we modified in the previous animation, to have a different
behavior.

Ninth effect: Button overlay

For this effect, we will start from the initial code of:

section4\ani9\index.html

<!DOCTYPE html>
<html lang="en">
223
<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">
<link rel="stylesheet" href="style.css">
</head>

<body>
<a href="#">Button</a>
</body>

</html>

And the basic CSS:

section4\ani9\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We apply a base style to create a button with a link; It's important to note the relative positioning and the overflow
property as we're going to create an extra container, like in the transitions section:

a {
text-decoration: none;
color: white;
font-family: sans-serif;
font-size: 40px;
border: 3px solid white;
padding: 40px 80px;
position: relative;
overflow: hidden;
}

We create the extra container, inclined; to which, we apply the following animation:

a:before {
content: '';
background-color: #F44336;

224
top: -100px;
left: 0;
width: 80px;
height: 400px;
position: absolute;
z-index: -1;
transform: rotate(-30deg);
animation: moving 1.2s linear infinite;
transition: all .5s;
}

In the animation, we rotate the container from left to right:

@keyframes move {
from {
left: -80px;
}

to {
left: 130%;
}
}

Giving the following effect:

And in the hover event, we stop the animation and scale the extra container:

a:hover::before {
width: 100%;
animation: none;
transform: rotate(0);
}

Giving the following effect:

225
Tenth effect: Ripple
For this effect, we will start from the initial code of:

section4\ani10\index.html

<!DOCTYPE html>
<html lang="en">

</html>

As you can see, we are going to use several CSS filters:

https://developer.mozilla.org/en/docs/Web/CSS/filter

With which what is sought is to vary the color of the DIV containers without the need to indicate several
backgrounds for each one of them; you can consult the previous link, to have the detail of css filter, but, the name

226
of the filters represent it operation; CSS filters are mainly used for images as it happens with programs like GIMP
or Photoshop, but they can be used in other types of HTML elements as we are doing in this example.

As for the base CSS, in which, it is important to note the use of the gap property to place spaces between the
FLEX elements:

section4\ani10\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
gap: 5px;
}

.ripple::before,
.ripple::after {
position: absolute;
top: 0;
left: 0;
}

We define a base style for all previously created containers; it is important to note that, in the same body, we
define the style for the extra containers and that they all have the same color; besides, that the color of the
shadow is the one through the property of box-shadow is the color defined in the background but with opacity;
and this is necessary for the desired effect:

.ripple,
.ripple::before,
.ripple::after {
content: "";
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
background: rgba(255, 0, 0, 1);
animation: shadow 3s linear infinite 0s;
}

We modify the positioning of the extra containers so that they are located just behind the parent container:

.ripple::before,
.ripple::after {
227
position: absolute;
top: 0;
left: 0;
}

In addition to this, we add a delay for each of the extra containers:

.ripple::before {
animation: shadow 3s linear infinite 1s;
}

.ripple::after {
animation: shadow 3s linear infinite 2s;
}

Finally, the animation, what it does is to grow the shadow until making it completely transparent, that is, invisible:

@keyframes shadow {
to {
box-shadow: 0 0 0 30px rgba(0, 0, 0, 0)
}
}

And we will have the following effect:

To simplify this exercise a bit more, we can use the variables in CSS to indicate the delay:

var(--ani, 0s)

And we will have the same behavior.

Remember that, to work with the variables in CSS, we can define it in the root, to use them throughout the
document:

:root {
--ani: 0s;
228
}
***
.ripple,
.ripple::before,
.ripple::after {
***
animation: shadow 3s linear infinite var(--ani);
}

.ripple::before {
/* animation: shadow 3s linear infinite 1s; */
--ani: 1s
}

.ripple::after {
/* animation: shadow 3s linear infinite 2s; */
--ani: 2s
}

Or locally to a property:

.ripple,
.ripple::before,
.ripple::after {
***
/* animation: shadow 3s linear infinite 0s; */
animation: shadow 3s linear infinite var(--ani, 0s);
}

.ripple::before {
/* animation: shadow 3s linear infinite 1s; */
--ani: 1s
}

.ripple::after {
/* animation: shadow 3s linear infinite 2s; */
--ani: 2s
}

In the end, they also have global reach, but, in the previous way, it can also be given a default value, which in the
previous example would be zero seconds.

Eleventh effect: Sliding bottom

For this effect, we will start from the initial code of:

229
section4\ani11\index.html

<!DOCTYPE html>
<html lang="en">

<body>
<a href="#">
Button
</a>
</body>

</html>

This effect will be based on experiment 30 of chapter 2 in which we have a sliding bottom using the:

repeating-linear-gradient

That now we want to encourage; let's create an animation to move the background:

@keyframes bg {
to {
transform: translateX(-50%);
}
}

Which will be applied to the extra container that is the one that has the gradient background defined:

a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-image: repeating-linear-gradient(90deg, #FFF, #FFF 20px, #5500FF 20px,
#5500FF 40px);
z-index: -1;
animation: bg 5s linear infinite;
}

230
A fundamental difference with the original experiment is that, in this experiment, 90 degree bars are used, instead
of 45 degree ones; the reason is that, since the animation is of infinite type, the ends of the container are not the
same and therefore, it gives an ugly effect when finishing and starting the animation for the first time:

So, we use 90 degree bars instead:

Optionally, we can perform some effects on the hover, such as leaving the animation applied:

a:hover::before {
animation: bg 1s linear 1;
animation-fill-mode: forwards;
}

Or better yet, pause it while the hover event is hold:

a:hover::before {
animation-play-state: paused;
}

With this, we have a nice effect of moving the bars at the bottom of the button until the user positions the cursor
on top of the button; at which point, the animation is paused.
231
Twelfth effect: Loading 1
For this effect, we will start from the initial code of:

section4\ani12\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the basic CSS:

section4\ani12\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We will create some circles horizontally:

ul {
margin: 0;
padding: 0;
display: flex;
}

ul li {
232
list-style: none;
width: 10px;
height: 10px;
background-color: #5500FF;
margin: 0 2px;
border-radius: 50%;
animation: jump 1.2s linear infinite;
}

We add a delay on each of the LIs proportionally (i.e. start the animation within 0.2 seconds):

ul li:nth-child(1) {
animation-delay: 0s;
}

ul li:nth-child(2) {
animation-delay: 0.2s;
}

ul li:nth-child(3) {
animation-delay: 0.4s;
}

For the animation, we will perform a jump:

@keyframes jump {
0%,
100% {
transform: translateY(0);
}

80% {
transform: translateY(-20px);
}
}

We can improve the animation, to make it more like a loader, cutting the animation time and placing 0% to 70% of
the animation at a translation of 0 pixels, with this, we have a much nicer effect than together with the delay and
the short of the animation, each circle will be animated independently and not jointly as we currently have:

@keyframes jump {

0%,
70%,
100% {
transform: translateY(0);

233
}

80% {
transform: translateY(-20px);
}
}

Another interesting detail is to place a slight regression in the translation in the Y:

@keyframes jump {

0%,
70%,
100% {
transform: translateY(0);
}

80% {
transform: translateY(-20px);
}
95% {
transform: translateY(5px);
}
}

And with this, we have a simple loader effect like the following:

Variant
As a possible variant of the previous effect, we can add other CSS effects such as shading and scaling:

@keyframes jump {

234
0%,
70%,
100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
transform: translateY(0) scale(1);
}

80% {
box-shadow: 0 0 0 5px rgba(85, 0, 255, 0.1);
transform: translateY(-20px) scale(1.5);
}

95% {
box-shadow: 0 0 0 1px rgba(85, 0, 255, 0.3);
transform: translateY(5px) scale(.9);
}
}

And we will have:

Thirteenth Effect: Jump

For this effect, we will start from the initial code of:

section4\ani13\index.html

<!DOCTYPE html>
<html lang="en">

</body>

</html>

And the basic CSS:

section4\ani13\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We will apply a design of circles on a line:

ul {
margin: 0;
padding: 0;
display: flex;
border-bottom: solid 10px #5500FF;
}

ul li {
list-style: none;
width: 25px;
height: 25px;
background-color: #5500FF;
margin: 0 10px;
border-radius: 50%;
animation: jump 0.8s linear infinite;

236
}

The animation consists of moving the sphere in the Y axis, so that it looks like a jump in a disorganized way and
without maintaining a proportion in this opportunity:

@keyframes jump {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-120px);
}
}

We apply a delay in the animations in any order and in any proportion in this opportunity:

ul li:nth-child(1) {
animation-delay: 0.4s;
}

ul li:nth-child(2) {
animation-delay: 0.7s;
}

ul li:nth-child(3) {
animation-delay: 0;
}

ul li:nth-child(4) {
animation-delay: 0.3s;
}

ul li:nth-child(5) {
animation-delay: 0.1s;
}

ul li:nth-child(6) {
animation-delay: 0.5s;
}

And with this, we have some circles animated with a delay which together give an interesting animation:

237
How can you evaluate, it is not always necessary to maintain an increasing order in the delays and indicating
proportional values, since, generally, delays are used in a proportional and incremental way, for example, the one
from the previous experiment that the times were growing proportionally in a time of 0.2 seconds:

ul li:nth-child(1) {
animation-delay: 0s;
}

ul li:nth-child(2) {
animation-delay: 0.2s;
}

ul li:nth-child(3) {
animation-delay: 0.4s;
}

It all depends on the effect we want to achieve and always remember that imagination is the only limit to your
experiments.

Fourteenth effect: Pulse

For this effect, we will start from the initial code of:

section4\ani14\index.html

<!DOCTYPE html>
<html lang="en">

</html>

The SVG was taken from the heroicons.com website; this effect is going to be a pulse effect, similar to the tenth
effect presented in this chapter, but using the border instead of the shadow; to do this, we'll create a couple of
extra containers placed in the middle of the parent container:

section4\ani14\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}
.pulse::before,
.pulse::after {
content: '';
position: absolute;
left: -20px;
right: -20px;
bottom: -20px;
top: -20px;
border: 1px solid #5500FF;
border-radius: 50%;
animation: pulse 2s linear infinite;
}

239
.pulse:after{
animation-delay: .5s;
}

We apply the base CSS of the parent container, in which, additionally, we use the flexes to align the SVG:

.pulse {
width: 80px;
height: 80px;
background-color: #5500FF;
color: #FFF;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid #4400CC;
animation: growth 2s linear infinite;
}

.pulse svg {
width: 60%;
}

And we create the pulse effect by scaling, which is, similar to the ripple effect we saw before, but using the edges
instead of the box-shadow:

@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0;
}

50% {
transform: scale(1);
opacity: 1;
}

100% {
transform: scale(1.2);
opacity: 0;
}
}

240
Increase
Along with the effect above, we're going to want to scale the parent container a bit; just at the moment of the
wave; we will start from the initial code:

.pulse {
***
animation: growth 2s linear infinite;
}

@keyframes growth {

0%,
80%,
100% {
transform: scale(1);
}

90% {

transform: scale(1.2);
}
}

The idea is that the effect is subtle and fast, like the previous ones; but, with the previous animation, we will see
that the pulse and the growth effect do not go at the same rate, that is, they are not synchronized; therefore, you
have to adjust the keyframes; something interesting to work with even numbers, such as those used in the
animation of the pulse:

.pulse:before,
.pulse:after {
***
animation: pulse 2s linear infinite;
}

.pulse:after {
animation-delay: 0.5s;
}

These values are divisible by two, therefore, an easy way to obtain synchronization between the effects, is to start
placing blocks of 10% or 5% until synchronization is achieved; for the first pulse, the following keyframes allow
synchronization:

@keyframes growth {

0%,
50%,
241
70%,
80%,
100% {
transform: scale(1);
}

60% {
transform: scale(1.2);
}
}

We can even adjust the time more, adjusting from 50% to 55%, giving a faster effect on the animation:

@keyframes growth {

0%,
55%,
70%,
80%,
100% {
transform: scale(1);
}

60% {
transform: scale(1.2);
}
}

The trick is to perfectly understand the use of keyframes, and make the animation exactly when it is required; in
the case of the previous animation, we see that from 0% to 55%, there is no scaling effect, from 55% to 60%, we
have the animation and from 60% to 70% the scaling from 1.2 to 1 occurs; finally, from 70% to 100% there is no
scaling.

And for the second pulse:

@keyframes growth {

0%,
30%,
55%,
70%,
80%,
100% {
transform: scale(1);
}

242
35%,
60% {
transform: scale(1.2);
}
}

And with this, we have the following effect:

Of course, the most optimal way would be to apply mathematical calculations to the animations until
synchronization is achieved, but, of course, this would be the most complex way to achieve this type of
synchronization.

Fifteenth effect: Rotating edge

For this effect, we will start from the initial code of:

section4\ani15\index.html

<!DOCTYPE html>
<html lang="en">

</html>

And the basic CSS:

section4\ani15\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
}

We are going to use the same style as for the parent component of the previous effect:

.effect {
width: 80px;
height: 80px;
background-color: #5500FF;
border: 5px solid #4400BB;
color: white;
border-radius: 50%;
text-align: center;
font-size: 48px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

And we need an extra container the size of the parent for the rotating border effect we're going to create:

.effect:after {
content: '';

244
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: 50%;
border: 2px dashed #4400BB;
transition: all 1s;
opacity: 0;
z-index: -1;
box-sizing: border-box;
transform: scale(1);
}

With the border-box of the box-sizing property we tell the browser to take into account any border and padding
values when calculating the width and height of an element; for example, if you set an element's width to 100
pixels, those 100 pixels will include any borders or padding you've added; it is important to note the use of the
dashed border with dots for the rotation effect.

The edge rotation effect, we are going to apply it by scaling the extra container to make it visible and triggering it
on the hover event; with this, accompanied by the rotating animation applied to the extra container, we have an
effect of a rotating border sticking out of the parent; it is important to note the use of the border-box to align the
containers:

.effect:hover:after {
opacity: 1;
transform: scale(1.3);
}

.effect:hover:after {
opacity: 1;
animation: rotating 5s ease-in-out infinite 1s;
}

@keyframes rotating {
/* 0% {
transform: scale(1) rotate(0deg);
} */

0% {
transform: scale(1.3) rotate(0deg);
}
100% {
transform: scale(1.3) rotate(360deg);
}

245
}

As you can see in the animation above, we did not indicate a base state for the animation, which would be
something like:

0% {
transform: scale(1) rotate(0deg);
}

What makes a somewhat abrupt animation; a base state is not used in the animation so that the animation does
not return to its base state at the end of the animation, but the animation appears abruptly; to avoid this, we can
accompany the animation with a transition:

.effect:hover:after {
opacity: 1;
transform: scale(1.3);
}

And we add a delay in the animation, which will be the same time as the duration of the transition:

.effect:hover:after {
opacity: 1;
animation: rotating 5s ease-in-out infinite 1s;
}

Finally, we have:

Sixteen effect : Filled Text

This effect will be similar to the one seen in chapter 4, experiment 1; for this purpose, we will start from the initial
code of:

section4\ani16\index.html

<!DOCTYPE html>

246
<html lang="en">

</html>

data-text attribute that we will assign in the CSS using the attr() function.

And the basic CSS:

section4\ani16\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We will create the base text style:

h1 {
margin: 0;
padding: 0;
font-size: 60px;
color: #ccc;
text-transform: uppercase;
letter-spacing: 10px;
position: relative;
}

And the style for the extra container, it is important to put the same value of the letter spacing in the parent and
extra container in case you want to use said property:

h1:before {
content: attr(data-text);
247
position: absolute;
top: 0;
left: 0;
width: 0;
color: #5500FF;
letter-spacing: 10px;
overflow: hidden;
border-right: 4px solid #5500FF;
animation: hover 2s linear infinite;
}

In the CSS above, we put a border, which will give an interesting effect to the animation; finally, the definition of
the animation in which, we show the extra container by changing the width:

@keyframes hover {

0%,
100% {
width: 0;
}

50% {
width: 100%;
}
}

And we will have:

Seventeenth effect: Change background color

For this effect, we will start from the initial code of:

section4\ani17\index.html

<!DOCTYPE html>
<html lang="en">

<body>

</body>

</html>

And the basic CSS:

section4\ani17\style.css

body {
height: 100vh;
animation: bgchange 10s infinite;
}

Important to notice the animation defined in the body.

This animation is extremely simple and all we do is change the background color; you can place as many
keyframes as you want in which you set your colors for each keyframe; again, 0% and 100% correspond to the
same color to avoid abrupt changes:

@keyframes bgchange {
0%,
100% { background: #FFF }

20% { background: red }

40% { background: yellow }

60% { background: blue }

80% { background: green }

}

And we will have a changing color for the background.

Eighteenth effect: Loading 2

For this effect, we will start from the initial code of:

section4\ani18\index.html
249
<!DOCTYPE html>
<html lang="en">

<body>
<div class="container">
<p>loading</p>
<div class="ring"></div>
</div>
</body>

</html>

And the basic CSS:

section4\ani18\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We give a fixed size to the container that will allow the effect of loading and relative positioning to be able to align
its children as if they were extra containers:

.container {
position: relative;
width: 150px;
height: 150px;
}

We create the ring, as an absolute positioning so that it does not influence the "loading" text; in addition to
creating the ring effect, for this, we use only one edge with maximum rounding:

.ring {
position: absolute;
250
top: 0;
left: 0;
width: 100%;
height: 100%;
border-left: 4px solid #FFF;
border-radius: 50%;
animation: ring 1s linear infinite;
}

For the text, we set a basic style; the most important thing is to notice the use of the line-height with the same
value of the height of the .container so that it is aligned in the middle:

p {
width: 100%;
height: 100%;
margin: 0;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}

In the animation, we rotate the ring, using the same logic as in experiment 15; although, this time we accompany it
with a change in the color of the border:

@keyframes ring {

0% {
transform: rotate(0deg);
border-left: 4px solid #FFF;
}

50% {
transform: rotate(180deg);
border-left: 4px solid #5500FF;
}

100% {
transform: rotate(360deg);
border-left: 4px solid #FFF;
}
}

Finally, we have:

251
Nineteenth effect: Loading 3
For this effect, we will start from the initial code of:

section4\ani19\index.html

<!DOCTYPE html>
<html lang="en">

</html>

The SPANs will be the loading bars; you can customize the amounts to taste.
252
And the basic CSS:

section4\ani19\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We are going to place the alignment in flex for the bars

.loading {
display: flex;
}

We create the bars separated by a margin with a rounded edge at the top only:

.loading span {
width: 15px;
height: 100px;
background-color: white;
margin-left:5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
animation: loading 1s linear infinite;
transform-origin: bottom;
}

It is important to note the transformation from the bottom for the effect we want to achieve; in addition, we place a
delay for each of the bars:

.loading span {
width: 15px;
height: 100px;
background: #FFF;
margin-left: 5px;

border-top-left-radius: 20px;
border-top-right-radius: 20px;
transform-origin: bottom;

animation: loading 1s linear infinite;

253
}

.loading span:nth-child(2){
animation-delay: 0.1s;
}

.loading span:nth-child(3){
animation-delay: 0.2s;
}

.loading span:nth-child(4){
animation-delay: 0.3s;
}

Finally, the animation is to apply the geometric scaling transformation from the bottom:

@keyframes loading {
0% {
transform: scaleY(.1);
}

fifty% {
transform: scaleY(1);
}

100% {
transform: scaleY(.1);
}
}

Finally, we have the following effect:

254
Variants
As variants, you can modify the origin of the geometric and rounded transformation for a better finish and with this,
the final effect:

.loading span {
***
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
transform-origin: top;
}

And we will have:

Or also:

.loading span {
***
border-radius: 20px;
/* transform-origin: top; */
}

And we will have:

255
Twentieth effect: Loading 4
For this effect, we will start from the initial code of:

section4\ani20\index.html

<!DOCTYPE html>
<html lang="en">

</div>
</body>

</html>

256
Each of the SPANs will be squares aligned in blocks of a 3x3 matrix.

And the basic CSS:

section4\ani20\style.css

body {
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
}

We are going to define the container of a fixed size in which the squares will be defined:

.loading {
width: 75px;
height: 75px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

It is important to note the flex-wap to avoid overflow and to organize all the SPANs/FLEX in a single column; then,
we define the style of the squares:

span {
width: 25px;
height: 25px;
position: relative;
}

For this style, there is no background color applied, since the background color will be applied to the extra
container generated for each of the SPANs so that it can be animated using CSS and the parent container is not
distorted and with this, the positioning of each one of the SPANs:

span:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #5500FF;
257
animation: loading .5s linear infinite;
animation-direction: alternate-reverse;
}

alternate-reverse value on the animation-direction property, the animation does the reverse when it ends; for
the animation, we have:

@keyframes loading {
0% {
transform: scale(1);
}

100% {
transform: scale(0);
}
}

We apply the corresponding delays for the effect we want to perform:

.loading span:nth-child(4):before,
.loading span:nth-child(5):before,
.loading span:nth-child(6):before {
animation-delay: 0.1s;
}

.loading span:nth-child(7):before,
.loading span:nth-child(8):before,
.loading span:nth-child(9):before {
animation-delay: 0.2s;
}

width and height property instead of scaling:

@keyframes loading {
0% {
width: 100%;
height: 100%;
}

100% {
width: 0;
height: 0;
}
}

But, with scaling we have more control and, for example, you can vary the origin of the transformation to vary the
final effect; for instance:
258
span:before {
***
transform-origin: bottom;
}
@keyframes loading {
0% {
/* width: 100%;
height: 100%; */
transform: scale(1);
}

100% {
/* width: 0;
height: 0; */
transform: scale(0);
}
}

And finally, we have the following effect:

Chapter source code:

https://github.com/libredesarrollo/curso-css-transiciones-animaciones/tree/main/section4

Where to continue from here:

Without much more to say, I hope this book was more than what you expect from it; If you have any doubts,
remember that you can reread part or all of the book to strengthen your ideas.

Remember that in order to master CSS animations and transitions, you have to do several projects, translate your
own ideas into your projects, and modify the ones presented in this book.

259
This will not be the last of this book, since I intend to keep it for a long time; as I receive feedback from you, the
readers, I will make corrections and add new chapters. remember that the maintenance of this book depends on
you. That you please share the link of where to buy this book, through your social networks so that more people
can be interested in this writing and with this, the more people the book reaches, the more content I will
contribute.

The book is currently in development.

260

Probability and Statistics in Engineering: - Restricted!
No ratings yet
Probability and Statistics in Engineering: - Restricted!
672 pages
Sanet - ST - Pragmatic Type Level Design
100% (1)
Sanet - ST - Pragmatic Type Level Design
331 pages
PRACTICAL FILE OF Matlab
No ratings yet
PRACTICAL FILE OF Matlab
27 pages
Quant Masters
No ratings yet
Quant Masters
220 pages
CSS Animations and Transitions For The Modern Web
No ratings yet
CSS Animations and Transitions For The Modern Web
322 pages
Flanges General For Dummies
No ratings yet
Flanges General For Dummies
68 pages
Module 1 Artificial Intelligence Fundamentals
No ratings yet
Module 1 Artificial Intelligence Fundamentals
27 pages
Object Oriented Programming Using C++ NOTES
100% (1)
Object Oriented Programming Using C++ NOTES
96 pages
Css Animations
100% (4)
Css Animations
78 pages
Design and Implementation of Online Clearance Report.
No ratings yet
Design and Implementation of Online Clearance Report.
63 pages
Python Notes-1
No ratings yet
Python Notes-1
178 pages
System Design Karanpratapsingh
No ratings yet
System Design Karanpratapsingh
191 pages
CSE357 Workbook
No ratings yet
CSE357 Workbook
284 pages
Allied Mathematics
No ratings yet
Allied Mathematics
9 pages
Oops Notes
No ratings yet
Oops Notes
179 pages
Capgemini Interview
No ratings yet
Capgemini Interview
13 pages
DSA Makaut
No ratings yet
DSA Makaut
162 pages
Lecture Notes
100% (1)
Lecture Notes
82 pages
Residential Building Specification
0% (1)
Residential Building Specification
3 pages
DCS 115 Object Oriented Programming
No ratings yet
DCS 115 Object Oriented Programming
304 pages
Python List MCQs With Answers Amp Explanations
No ratings yet
Python List MCQs With Answers Amp Explanations
11 pages
CS6501 All Units Notes 2013 Regulation
No ratings yet
CS6501 All Units Notes 2013 Regulation
163 pages
Unit Ii-Oops Bca
No ratings yet
Unit Ii-Oops Bca
35 pages
DDM 5
No ratings yet
DDM 5
46 pages
BDA - Module 5
No ratings yet
BDA - Module 5
31 pages
Pictogram and Bar Chart Gr.4
No ratings yet
Pictogram and Bar Chart Gr.4
11 pages
PHP
100% (1)
PHP
131 pages
Unit 5 Classes and Objects: Defining The Class in C++
No ratings yet
Unit 5 Classes and Objects: Defining The Class in C++
7 pages
Digital Image Processing Unit 2
No ratings yet
Digital Image Processing Unit 2
82 pages
ROV INSET Completion Report Template
No ratings yet
ROV INSET Completion Report Template
37 pages
Gis Revival
No ratings yet
Gis Revival
2 pages
Getting Creative With Keyframes
No ratings yet
Getting Creative With Keyframes
23 pages
267 273 Eligibility Criteria For Admission Session 2024 25
No ratings yet
267 273 Eligibility Criteria For Admission Session 2024 25
22 pages
Database Management System
No ratings yet
Database Management System
161 pages
Manual Bomba
No ratings yet
Manual Bomba
20 pages
Evolution of Big Data
No ratings yet
Evolution of Big Data
21 pages
Elon Musk
No ratings yet
Elon Musk
3 pages
Real Pictures
No ratings yet
Real Pictures
8 pages
OPPS With C++
100% (2)
OPPS With C++
125 pages
Distance Based Models
No ratings yet
Distance Based Models
58 pages
2 Marks Questions
No ratings yet
2 Marks Questions
30 pages
Object Oriented Programming
No ratings yet
Object Oriented Programming
42 pages
Eship
No ratings yet
Eship
5 pages
Data Structures Unit 5
No ratings yet
Data Structures Unit 5
20 pages
Data Structure Using C by Mamata Garanayak 780d35 PDF
100% (1)
Data Structure Using C by Mamata Garanayak 780d35 PDF
460 pages
Object Oriented Programming With C++
No ratings yet
Object Oriented Programming With C++
2 pages
2023, IEEE TPWRD, Condition - Assessment - of - Power - Circuit - Breakers - Based - On - Machine - Learning - Algorithms
No ratings yet
2023, IEEE TPWRD, Condition - Assessment - of - Power - Circuit - Breakers - Based - On - Machine - Learning - Algorithms
10 pages
Shivendra Frontpage
No ratings yet
Shivendra Frontpage
10 pages
The Pros and Cons of AI
No ratings yet
The Pros and Cons of AI
1 page
Open Source Intelligence (OSINT) - A Practical Introduction - 24 - 10 - 23 - 13 - 52 - 21
100% (3)
Open Source Intelligence (OSINT) - A Practical Introduction - 24 - 10 - 23 - 13 - 52 - 21
128 pages
IJCRT1134034
No ratings yet
IJCRT1134034
8 pages
Amphion Drilling System
No ratings yet
Amphion Drilling System
170 pages
C.V of Fraz
No ratings yet
C.V of Fraz
3 pages
Microsoft Word - Advanced Java Programming
No ratings yet
Microsoft Word - Advanced Java Programming
266 pages
03 Descriptive Statistics
No ratings yet
03 Descriptive Statistics
77 pages
Graph Traversal
No ratings yet
Graph Traversal
4 pages
Python Terms and Jargons
No ratings yet
Python Terms and Jargons
14 pages
Taller #1 Ingles
No ratings yet
Taller #1 Ingles
3 pages
Chapter 1 Digital Systems and Binary Numbers
No ratings yet
Chapter 1 Digital Systems and Binary Numbers
100 pages
Sun2000 100KTL M1
No ratings yet
Sun2000 100KTL M1
2 pages
Theory of Computation Notes GGSIPU
No ratings yet
Theory of Computation Notes GGSIPU
124 pages
Da42-V1 Standard Equipment List Price $749,800 Usd
No ratings yet
Da42-V1 Standard Equipment List Price $749,800 Usd
2 pages
Move Things With CSS Jhey Tompkins 2020
No ratings yet
Move Things With CSS Jhey Tompkins 2020
78 pages
Toc TH PDF
No ratings yet
Toc TH PDF
154 pages
CMPG111 Semester Planner
No ratings yet
CMPG111 Semester Planner
3 pages
Dolby 5.1 Speaker Setup Guidelines
100% (1)
Dolby 5.1 Speaker Setup Guidelines
1 page
1 - Univariate Data PDF
No ratings yet
1 - Univariate Data PDF
80 pages
Sira 99atex3171
No ratings yet
Sira 99atex3171
12 pages
Oops Notes
No ratings yet
Oops Notes
327 pages
Morris Brody 1845 52: Technology
No ratings yet
Morris Brody 1845 52: Technology
10 pages
4.1.1.7 Lab Tracing A Route
No ratings yet
4.1.1.7 Lab Tracing A Route
3 pages
Data Structures by Fareed Sem IV 27-Jan-2020 Pages 213 Completed W1
No ratings yet
Data Structures by Fareed Sem IV 27-Jan-2020 Pages 213 Completed W1
213 pages
Frontline Robotics Teleoperated UGV (TUGV)
No ratings yet
Frontline Robotics Teleoperated UGV (TUGV)
3 pages
DHTML Positioning
No ratings yet
DHTML Positioning
11 pages
PHP Tutorial
No ratings yet
PHP Tutorial
432 pages
Freelancer Guide
No ratings yet
Freelancer Guide
33 pages
Data Structure
No ratings yet
Data Structure
71 pages
Dlmdmdql01 Course Book
No ratings yet
Dlmdmdql01 Course Book
104 pages
Bhea Ramos: Work Experience
No ratings yet
Bhea Ramos: Work Experience
1 page
Web Technology
No ratings yet
Web Technology
90 pages
Database Management System PDF
No ratings yet
Database Management System PDF
228 pages
Mil4 1
No ratings yet
Mil4 1
43 pages
File 1
No ratings yet
File 1
2 pages
TC Notes
No ratings yet
TC Notes
108 pages
20ISL47A OOPS With JAVA Lab Manual
100% (1)
20ISL47A OOPS With JAVA Lab Manual
30 pages
Tech Paper 4221
No ratings yet
Tech Paper 4221
16 pages
Spread Spectrum in Mobile Computing - Javatpoint
No ratings yet
Spread Spectrum in Mobile Computing - Javatpoint
9 pages
C++ Syllabus
No ratings yet
C++ Syllabus
1 page
PROPERTIES and USES OF HYDROCERAMIC
No ratings yet
PROPERTIES and USES OF HYDROCERAMIC
2 pages
Oops Notes
No ratings yet
Oops Notes
122 pages
Big Data and Data Science
No ratings yet
Big Data and Data Science
6 pages
15144958
100% (1)
15144958
7 pages
DSA Preparation Syllabus - PrepInsta Prime
No ratings yet
DSA Preparation Syllabus - PrepInsta Prime
1 page
Textbook of Engineering Chemistry
From Everand
Textbook of Engineering Chemistry
C. Parameswara Murthy
No ratings yet

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Creative Transitions Animations Css

Uploaded by

Creative Transitions Animations Css

Uploaded by

Creative transitions and animations in CSS

Your practical guide to creating transitions and animations on HTML elements

Andres Cruz Yoris

This version was published: 2022-12-13

Get your copy at:

For those people who want to learn something new.

The use of bold in paragraphs has two functions:

To display tips we use the following layout:

For the code snippets:

When using the *** or //***

Or on Discord in the HTML, CSS and JS channel:

Tweet about the book! 3

About the Author 4

Chapter 1: Basic Transitions and Transformations 1

Chapter 2: Transitions and translations on buttons 16

Chapter 4: Various effects with CSS, transitions and filters 174

Chapter 5: Creative animations 195

Our example would look like this:

Remember that you can use other events like focus.

This is the format we use throughout the book.

And in the hover event:

And we will have:

transition: background 1s ease-in , border-radius .2s ease 1s;

transition: all .2s;

Translate on the X axis 10 pixels to the left:

transform: translate(-10px, -50px);

transform: translate(-10px, 50px);

Use them independently:

transform: translateX(-10px) translateY(5px);

Or in percentages as another measurement factor:

transform: translate(-10px, 5%);

Scale to half the image size on both axes:

transform: scale(.5, 2);

Skew 30 degrees varying along the X and Y axis:

Finally, the complete code:

And the CSS:

With this, we will have:

And we will have:

Apply translations in the extra container

This would affect the button:

And by applying the hover event, we will have:

And we will have when completing the hover effect:

With the exercise complete, you can activate the overflow:

With this, we will have the first effect ready.

And the CSS:

before and after selector to create an extra component:

And change the text color:

And by applying the hover event, we will have:

Or indicate other types of properties such as rounding:

And the CSS:

And by applying the hover event, we will have:

Remember that you can change the angle of the translation:

And the CSS:

And by applying the hover event, we will have:

And compare results.

And the CSS:

And by applying the hover event, we will have:

We will apply the following design for the bubbles:

And in delay for the bubbles:

And by applying the hover event, we will have:

And the base CSS:

If we don't hide the containers, we should see something like:

And we will have:

And when applying the hover effect:

And the base CSS:

And by applying the hover effect, we will have:

And the base CSS:

The CSS is as follows:

And when applying the hover effect:

And the base CSS:

And the one of the icon, we hide it totally:

By do the hover event, we invert the display of the containers:

And when applying the hover effect :

And the base CSS:

And by doing the hover event, we scroll the containers:

And when applying the hover event :

When using the * or //*