ប៊ូតុង Social Media រចនា​ដោយ​ប្រើ transition effects ក្នុង CSS

   ខ្ញុំ​គ្មាន​អី​បញ្ចេញ​យោបល់​ច្រើន​លើ​ប៊ូតុង​បណ្ដាញ​សង្គម​ដ៏ល្អឯក​ខាង​លើ​នេះ​ទេ! ព្រោះ​វា​មាន​លក្ខណៈ​ស្អាត​ប្លែក និង​ចាប់​ទៅ​តាម​ពណ៌​នៃ​បណ្ដាញ​សង្គម​នីមួយៗ។ តាម​ពី​ទៅ វា​មាន​លក្ខណៈ​ជា transition effects ដែល​ជា effects មួយ​ពេល​ដែល​យើង​យក​កូន​កណ្ដុរ​ដាក់​ពី​លើ​វា វា​នឹង​លោក​ពណ៌​ឡើង​បែប​យឺតៗ (Slow)។ *** តែ​នៅ​ក្នុង​រូប​ដែល​ខ្ញុំ​ថត​ខាង​លើ​នេះ មិន​លោត​ពណ៌​យឺតៗ​ទេ! (មូល​ហេតុ​អត់​ដឹង​ដែរ) :D សូម​ទោស​ផង តែ​តាម​ពិត​ទៅ​វា Transition Effects មែន។...

   ប៊ូតុង​បណ្ដាញ​សង្គម​ខាង​លើ​នេះ លោក​អ្នក​អាច​យក​វា​ទៅ​ប្រើប្រាស់​ជា​មួយ​គេហទំព័រ, ឬ​ប្លុកករ​បាន​យ៉ាង​ងាយ​ស្រួល ហើយ​ស្អាត​ថែម​ទៀត​ផង សូម​នេះ សូម​ទៅ​មើល​កូដ​របស់​វា​ខាង​ក្រោម។

កូដ​ HTML

<a href="#" class="social facebook">FACEBOOK</a>
<a href="#" class="social google-pluse">Google+</a>
<a href="#" class="social twitter">Twitter</a>
<a href="#" class="social blogger">Blogger</a>
<a href="#" class="social wordpress">WordPress</a>
<a href="#" class="social yahoo">Yahoo</a>
<a href="#" class="social youtube">YouTube</a>
<a href="#" class="social tumblr">Tumblr</a>
<a href="#" class="social skype">Skype</a>
<a href="#" class="social pinterest">Pinterest</a>
<a href="#" class="social linkedin">LinkedIn</a>
<a href="#" class="social rss">RSS</a>

កូដ​ CSS

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#27292B;font-size:14px;font-family:arial, sans-serif;overflow-x:hidden;margin:0;padding:20px;}
a{-webkit-transition:all .3s ease-in 0;-moz-transition:all .3s ease-in 0;transition:all .3s ease-in 0;text-decoration:none;outline:0;}
.social{display:inline-block;color:#FFF;font-size:1.08em;text-transform:uppercase;line-height:50px;letter-spacing:2px;border:2px solid #FFF;width:125px;margin-bottom:10px;text-align:center;padding:0 30px;}
.social:hover{background-color:#fff;color:#000;}
.facebook:hover{border:2px solid rgba(59,89,152,0.2);background-color:#3b5998;color:#FFF;}
.google-pluse:hover{border:2px solid rgba(221,75,57,0.2);background-color:#dd4b39;color:#FFF;}
.twitter:hover{border:2px solid rgba(0,172,238,0.2);background-color:#00acee;color:#FFF;}
.blogger:hover{border:2px solid rgba(252,79,8,0.2);background-color:#fc4f08;color:#FFF;}
.wordpress:hover{border:2px solid rgba(33,117,155,0.2);background-color:#21759b;color:#FFF;}
.yahoo:hover{border:2px solid rgba(114,14,158,0.2);background-color:#720e9e;color:#FFF;}
.youtube:hover{border:2px solid rgba(196,48,43,0.2);background-color:#c4302b;color:#FFF;}
.tumblr:hover{border:2px solid rgba(52,82,111,0.2);background-color:#34526f;color:#FFF;}
.skype:hover{border:2px solid rgba(0,175,240,0.2);background-color:#00aff0;color:#FFF;}
.pinterest:hover{border:2px solid rgba(200,35,44,0.2);background-color:#c8232c;color:#FFF;}
.linkedin:hover{border:2px solid rgba(14,118,168,0.2);background-color:#0e76a8;color:#FFF;}
.rss:hover{border:2px solid rgba(238,128,47,0.2);background-color:#ee802f;color:#FFF;}