Creating a Button with Push effect as Animation with Sass-Scss

omersurer(65)

Published in

#utopian-io

Words

782

Reading

4 min

Listen

Play

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to create a circle button and also its different versions.
You will learn more about @keyframes and we will use from --> to function.
You will learn how to use scale function and what it does.
You will learn how to define create an animation code block on hover.
You will learn how to empty divisions from html and create from them an effect.

Requirements

Any text editor. (Brackets, Atom, Notepad++)
Basic HTML knowledge
Basic SCSS code knowledge
SASS installed.
Local server (Wampserver)
Any browser

Resources

Difficulty

Intermediate

Description

In this tutorial we will create a button with push effect like in steemit upvote button but little bit different. This function will play as infinite with animation. If you follow this tutorial download all files from my github page and change the values. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section 3 divisions for our button. You can also add more divisions like I did as title.

2- On our stylesheet body is for our common rules and background. Our steem class has font-size as 30 pixels and bold its text color will be cyan. We are defining its size as auto with this way we can bring it to center of our page. We are doing this with position absolute top and left spacing and translate function. So far our text is styled.

3- In this step we have our division its id is middle and our Upvote text is inside of this division. So we start with id middle. With its size we are making it first a square but with 50% radius it will be rounded to circle. Bgcolor is aqua and for our text it will be aligned to center. Position will be absolute and with top left spacing and translate function we are centering it to our page. After that we are styling our text, It is between p tag so we style it under p. Outside and inside spacing will be 0, color will be black and line height will be 100 px and font 20px bold. And we define here also a hover. Its color and font-size will be change and our cursor will be pointer.

4- We have 2 more division as wave1 and wave2. Here we will only create 2 circles for our effect, so their code block will be the same and with this code block we are defining as 2px a circle. And other codes are to bring them to the center like our upvote section. With z-index we are taking them to background. So far we have all objects that we need and only thing is that we animate them.

5-We are starting to define our animation first with keyframes. We will use "from - to" codes and it will be translate and scale functions. The scale() function increases or decreases the size of an element.
We have our animation name but animation needs to belong somewhere so we will define it on hover to wave1 and wave2. Our code is animation --> animation name --> duration --> infinite and linear. Only difference is wave2 will have 0.6s delay.