Simple CSS Animation ( Animating a button )

drinkmeasap — Thu, 05 Sep 2019 17:31:37 +0000

A simple CSS animation can draw your visitors attention to some important part of your interface. You can also use these animations to make your website look more interesting!

Starting off, I will not go through the button CSS but here is the design used.

Now, to use a CSS animation we must first specify our keyframes for the animation.

One simple example of this could be

@keyframes example {
  40% {background-color: green;}
  80% {background-color: red;}
}

In this animation the same CSS for the button style above was used, a animation time of 2 seconds was specified to that button class on hover through following

.btn:hover {
  animation: example 2s;
}

This means that at 0% of the animation the background of the button is white which was specified at the .btn class. At 40% of 2 seconds it will be changed gradually from White to Green and then from 40% - 80% change from Green to Red, then return to the button specified background color.

Using these keyframes we can do a lot of various things with the button such as making it shake by

Which provides this following effect when hovering the button.

In this example it simply moves the button a few pixels gradually between each keyframe.

I should note that if you don't want the animation for something to trigger on hover, instead trigger after a certain time you can use

animation-delay: s

and enter how many seconds after the page loads you want to run the animation.

Now after you've read this far you might be curious about what other properties you can animate. This following article will show you a list of properties that you can use to animate.

Firefox MDN

Feel free to ask anything if you have any questions!

Positioning a text over an Image using CSS / HTML

drinkmeasap — Thu, 05 Sep 2019 17:01:32 +0000

Starting off we'll use this simple html layout, start by changing the img src to the image you will be using.

and we will also be using this css stylesheet.

Now we have a text in the center of this image.

A text-shadow can sometimes make the text more visible. Another way to make the text more visible is to add a box around your text with a low opacity.

CSS for the box

Wrapping the Image and Divs with this box class

Feel free to ask if you have any questions!

DEV Community: drinkmeasap

Simple CSS Animation ( Animating a button )

Positioning a text over an Image using CSS / HTML