Animated frames for social media buttons with 3D effect using only CSS3

Current article demonstrates how to create frames with 3D open/close door-effect for social media buttons using only CSS3 without JavaScript.

A simple single frame for social media button has the following HTML structure: div element with class "button-frame" which contains an element with code of social media button, input element which is needed to save the state of animation (either opened or closed) and label element with img element inside to show the icon of the current social media button.

Each social network or service has its own code for social media button which changes from time to time. The code can be taken from the official site of the corresponding social network or service, in most cases in the developer section.

In the example below instead of code of social media button you can see a simple image. It's done in this manner, because the code for some social networks or services is customize generated for the site where it's planned to be placed and the account which created it. So, when you are going to use such frames for your social media buttons, don't forget to replace the demo images with codes of your own social media buttons.

Here is a HTML code for simple single frame:

If you want to use more than one frame, you need to use a unique identifier for each frame which must be set as id attribute for input element and for attribute for label element of the current frame. Also, you need to replace the icon of a door of each frame with the corresponding icon of social media button which is placed in that frame. The icon is an image which must have size 144x72 pixels.

CSS styles:

.button-frame {
  display: inline-block;
  text-align: center;
  background-color: #F2F2F2;
  border: 1px solid #E1E1E5;
  height: 72px;
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  position: relative;
  width: 144px;
}

.button-frame input {
  display: none;
}

.button-frame label {
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  background-color: green;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform-origin: center bottom 0;
  -ms-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.button-frame label img {
  display: block;
}

.button-frame input:checked + label {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

The styles shown above render some elements in 3D space and only work in modern browsers. The following example should work in Firefox 10+, Chrome 12+, Safari 4+, Opera 15+, IE 10+.

Continue reading here: Install Redmine as FastCGI for Apache in FreeBSD

Was this article helpful?

0 0