#credit { width: 20px; height: 20px; background: #fff; border: solid #000 2px; color: #000; padding: 4px; font-family: "Squada One"; font-size: 13px; overflow: hidden; outline: 1px solid #fff; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; position:fixed; bottom: 0px; right:0px; margin: 5px; } #foom { display: inline-block; border-top: 2px solid #000; border-bottom: 2px solid #000; padding-left: 7px; margin-top: 0px; padding-right: 6px; -moz-transform: scale(1) rotate(22.34deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(22.34deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(22.34deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(22.34deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(22.34deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); margin-left: -11px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } #credit:hover { width:69px; } #credit:hover #foom { -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); margin-left: 1px; padding-left: 2px; padding-right: 38px; margin-right: -38px; }