Home / Articles / Programming languages / Markup languages / HTML & CSS / Animated frames for social media buttons with 3D effect using only CSS3

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

Animated frames for social media buttons with 3D effect using only CSS3
 
Animated frames for social media buttons with 3D effect using only CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

<div class="button-frame">
  <!--Put your code of twitter share button-->
  <input id="twitter" type="checkbox">
  <label for="twitter"><img src="twitter.png" alt=""></label>
</div>

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+.

To see it in action just click any icon:

Live demo

The following archive contains the example above:


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation