CODEWITHSUNDEEP
jquerycssuibutton
user3384389
user3384389

Reputation: 31

How to make a spinning text button

To day I have a very easy question (But I used whole day to find the tutorials)I want to make button like this site: http://www.koogco.no/ Look at the social buttons on the right, whn mouse rollover the button is spinning.

I have tried many keyword like : spinning button jquery, animate button etc. But I can´t find the name or even tutorials.

Can somebody help me to point this ?

Upvotes: 1

Views: 68

Answers (4)

Weafs.py
Weafs.py

Reputation: 23002

Here's is a CSS solution.

body {
  background: lightblue;
}
.container {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid black;
}
.img-container {
  margin-top: -25px;
  margin-left: 5px;
  transition: all 0.3s cubic-bezier(.21,1.22,1,1.31);
  cursor: pointer;
}
.img-top {
  background: url(http://dummyimage.com/20x20/000/fff&text=2);
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}
.img-bottom {
  background: url(http://dummyimage.com/20x20/000/fff&text=1);
  height: 20px;
  width: 20px;
}
.img-container:hover {
  margin-top: 5px;
}
<div class="container">
  <div class="img-container">
    <div class="img-top"></div>
    <div class="img-bottom"></div>
  </div>
</div>

EDIT: Replicating the one on this site as you requested.

a {
  text-decoration: none;
  color: brown;
}
.home {
  display: inline-block;
  vertical-align: top;
  color: brown;
  width: 70px;
  height: 25px;
  text-align: center;
  background: #0D0605;
  opacity: 0.9;
  line-height: 25px;
  cursor: pointer;
}
.container {
  display: inline-block;
  overflow: hidden;
  width: 70px;
  height: 25px;
  background-color: #0D0605;
  opacity: 0.9
}
.img-container {
  transition: all 0.3s cubic-bezier(0.21, 1.22, 1, 1.31);
  cursor: pointer;
  margin-top: -15px;
}
.img-top {
  width: 70px;
  height: 20px;
  color: brown;
  text-align: center;
}
.img-bottom {
  height: 20px;
  width: 70p;
  color: white;
  text-align: center;
}
.img-container:hover {
  margin-top: 5px;
}
<div class="home">HOME</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">ABOUT</a>
    </div>
    <div class="img-bottom">ABOUT</div>
  </div>
</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">SERVICE</a>
    </div>
    <div class="img-bottom">SERVICE</div>
  </div>
</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">CONTACT</a>
    </div>
    <div class="img-bottom">CONTACT</div>
  </div>
</div>

Upvotes: 1

JAZaki
JAZaki

Reputation: 1

Below are the websites from where you could download many animated social media icons that uses "hover Effect":

  1. http://designscrazed.org/html-css3-social-media-buttons/
  2. http://techfameplus.com/social-media-icons-with-hover-effect/

Upvotes: 0

Tiago Coelho
Tiago Coelho

Reputation: 5091

create a background with both images, one on top of the other. set

background-position: 0px 20px;

then animate background position with 

transition : all .2s;

by setting the :hover style to

background-position: 0px 0px;

Upvotes: 0

tsnorri
tsnorri

Reputation: 2097

You could use CSS3 transitions. See http://www.w3.org/TR/css3-transitions/ and, for example, http://css3.bradshawenterprises.com/transitions/. Specifically,

  1. Use absolute positioning for the button image and e.g. relative for its container.
  2. Position the inactive state image the way you want and the active state image e.g. above it.
  3. For the active state, move the active state image in the place of the inactive state image and the latter below the former.
  4. When it looks the way you want, add a transition property. It should look like transition: top 1s ease-in-out;.

Upvotes: 0

Related Questions