0

I saw a jelly button here: https://codepen.io/ayamflow/pen/Dufxr

But when I tried to create it on my laptop image its not working.

Here you can see: image of button

I am using these codes:
For HTML

<!doctype html>
<html>
<head>
<title>bubble</title>
<link rel = "stylesheet" type = "text/css" href = "assets/stylesheet.css" />

<script>
var $button = document.querySelector('.button');
$button.addEventListener('click', function() {
  var duration = 0.3,
      delay = 0.08;
  TweenMax.to($button, duration, {scaleY: 1.6, ease: Expo.easeOut});
  TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
  TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
});
</script>

</head>

<body>

<div class="button">
  <p>Click me</p>
</div>

</body>
</html>


And for CSS:

body {
  background: #f1c40f;
}

.button {
  background: #3498db;
  width: 180px;
  padding: 4px 0;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 3px;

  p {
    font-family: 'Roboto'; 
      text-align: center;
    text-transform: uppercase;
    color: #FFF;
    user-select: none;
  }

  &:hover {
    cursor: pointer;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10%;
    border-radius: 50%;
    background-color: darken(#f1c40f, 20%);
    opacity: 0.4;
    bottom: -30px;
  }
}

But its not working as https://codepen.io/ayamflow/pen/Dufxr. Can you tell me where I am making mistake?

3
Contributors
2
Replies
8
Views
5 Months
Discussion Span
Last Post by cereal
0

Is your CSS set out as SCSS? This may be the problem.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.