<br> http://i.hizliresim.com/D7Pnkz.jpg

**Video** : English Language<br>
**Tutorial** : BUILDING FLIP ANIMATION FOR SOCIAL MEDIA BUTTONS IN SASS (SCSS) <br>
**Githup link**:  [SASS(SCSS)](https://github.com/sass/sass) <br>

>**Sass(Scss) is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.** [SASS(SCSS) More Information](http://sass-lang.com/)

**What We Can Learn?**

In this video tutorial, we created a flip animation for social media icons. This values has a really nice subtle animation effect  when the mouse hovers over each image box. Then  you can also learn, how are these codes implemented on your web sites. 

**We Learn About**

Div Tags<br>
Used => socialbox, social(youtube, instagram, twitter, facebook), front, back<br>
Color<br>
Used =>  #cd201f, #e4405f, #55acee, #3b5999, rgba(0,0,0,.5), #fff<br>
Front-Back<br>
Used => align-items,  justify-content, backface-visibility, <br>
And Old Commands<br>
Used =>  box-shadow, height ,padding, display,position<br>


**Requirements**

1-Brackets Program<br>
2-Basic HTML code knowledge<br>
2-Basic SCSS code knowledge<br>


**Difficulty**

 Intermediate Level

**Description**

We will going  to learn SASS(SCSS) in this video. In the video we used; Div tags(socialbox, social(youtube, instagram, twitter, facebook), front, back), color(  #cd201f, #e4405f, #55acee, #3b5999, rgba(0,0,0,.5), #fff), Front-Back(align-items,  justify-content, backface-visibility), and old commands(box-shadow, height ,padding, display,position).

**Video Tutorial - English Language - 720p**

<iframe width="560" height="315" src="https://www.youtube.com/embed/5wSaB2yTQMw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>

**Curriculum**

If you want to more learn about SASS you can follow me and you can see its below ! <br>


[Responsive Image Grid With Animation](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-image-grid-with-animation-in-sass-scss)

[Different Home Page Part 2](https://utopian.io/utopian-io/@tarikhakan55/building-different-home-page-in-sass-scss-part-2)

[Different Home Page Part 1](https://utopian.io/utopian-io/@tarikhakan55/building-different-home-page-in-sass-scss-part-1)

[Image Slider For Web Page](https://utopian.io/utopian-io/@tarikhakan55/building-image-slider-for-web-page-with-sass-scss)

[Image Page For Gallery](https://utopian.io/utopian-io/@tarikhakan55/building-image-page-for-gallery-with-sass-scss) 

[Login Page For Users](https://utopian.io/utopian-io/@tarikhakan55/building-login-page-for-users-with-sass-scss)

[Login Page For Users](https://utopian.io/utopian-io/@tarikhakan55/building-login-page-for-users-with-sass-scss)

[Responsive Toggle Switch](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-toggle-switch-with-sass-scss)

[Responsive Dropdown Menu](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-dropdown-menu-with-sass-scss)


Author : @tarikhakan55 <br>
Steemit Türkiye & Utopian-io
Community


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tarikhakan55/building-flip-animation-for-social-media-buttons-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>