Member Avatar for peace_coder

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
  • 305 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by cereal
Member Avatar for diafol

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.