CODEWITHSUNDEEP
javascripthtmlcss
Sean King
Sean King

Reputation: 55

How to replicate this effect? CSS3

I'm trying to replicate the effect that happens when you hover over a button on this website:

http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

The width/height changes slowly and the text inside spins around. I've got the basics working as you can see but it feels really clunky and I can't help but feel I'm going about this the wrong way. The main problems I'm having are:

I've been trying to get it working using only css3/html but perhaps I should be using JS?

https://jsfiddle.net/1td9bkLt/

Help appreciated.

<div class="btn-hidden">
<p class="hide-p">PACKAGES</p>
<p class="see-p">PACKAGES</p>
</div><!--button-->

.btn-hidden {
border: 1px solid #A37276;
overflow: hidden;
position: absolute;
z-index: 7;
background-color: transparent;
border-color: #A37276;
color: #A37276;
border-radius: 0px;
height: 20%;
width: 40%;
transition: height, ease, 0.6s, left, ease, 0.6s, width, ease, 1s,     bottom, ease, 1s; }
.btn-hidden .see-p {
 padding: 0px;
 margin: 0px;
 margin-left: 10%;
 text-align: auto;
 margin-top: 6%;
 position: absolute; }
 .btn-hidden p {
margin-left: 10%; }
 .btn-hidden:hover {
transition: height, ease, 0.3s, left, ease, 1s, width, ease, 0.3s, bottom, ease, 0.3s;
width: 30%;
height: 18%;
left: 10%;
border: 1px solid #A3474E;
color: #A3474E; }
.btn-hidden:hover .hide-p {

  transition: bottom, 0.7s;
  transition: opacity, 0.3s;
  position: absolute;
  bottom: -0px; }
 .btn-hidden:hover .see-p {
  transition: top, 1s;
  top: 150px; }


 .hide-p {
 position: absolute;
 bottom: 150px; }

Upvotes: 1

Views: 86

Answers (1)

seahorsepip
seahorsepip

Reputation: 4799

Why multiple elements? Make sure that (height/width)+padding+margin is equal before and on hover. https://jsfiddle.net/1td9bkLt/1/

The vertical text animation can be done by adding a animation to the on hover css, if you need help with that let me know in the comments.

Update:

I ended up adding a <span> element inside the button since my negative line-height idea didn't seem to work :P

Here's the button with animated span text: https://jsfiddle.net/seahorsepip/1td9bkLt/3/

It uses position: relative; together with top: something; So it does not affect the items around the <span> like margin does.

Upvotes: 4

Related Questions