Push Buttons

In this example below you will see how to do a Push Buttons with some HTML / CSS and Javascript

Just playing around with some custom buttons. These have a 3D "pushy" kinda feel to them. Additionally, I used a little yayQuery to change some text after being pushed.

Thumbnail
This awesome code was written by Samuel Kendrick, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Samuel Kendrick ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Push Buttons</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<head></head>
<div class="container">
  <h2 class="display">Panel of Push Buttons</h2>
  <hr class="line-light"/>
  <div class="space-around">
    <button class="button submit">Submit</button>
  </div>
  <div class="space-around">
    <button class="button delete">Delete</button>
  </div>
  <div class="space-around">
    <button class="button misc">Misc</button>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/skendrick366/push-buttons-qXpvaz */
.display {
  font-family: "Open Sans";
  font-size: 48px;
  font-weight: 500;
  color: rgba(71, 144, 217, 0.8);
}

.check-label-display {
  font-family: sans-serif;
  font-size: 20px;
}

.line-light {
  margin-top: -10px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(71, 144, 217, 0.5);
  border-bottom: none;
  border-right: none;
  border-left: none;
}

.divider {
  margin-top: 30px;
  border-top: 1px solid rgba(10, 14, 10, 0.2);
}

.space-around {
  padding: 20px;
}

.container {
  padding: 2% 15%;
}

.button {
  background-color: #F3F3F3;
  box-shadow: -1px 10px 1px rgba(39, 181, 190, 0.4);
  font-family: sans-serif;
  display: block;
  outline: none;
  padding: 20px 30px;
  border-radius: 20px;
  border: none;
  font-size: 24px;
  opacity: 0.5;
  transition: all 0.3s cubic-bezier(0, 1, 1, 0.84);
  border: 1px solid rgba(34, 189, 198, 0.4);
}

.submit:hover {
  border: none;
  box-shadow: -1px 2px 1px rgba(39, 20, 20, 0.4);
  opacity: 1;
  background-color: rgba(58, 140, 59, 0.9);
  color: #E7E7E7;
  transform: translate(1px, 10px);
  cursor: pointer;
}

.delete:hover {
  border: none;
  box-shadow: -1px 2px 1px rgba(39, 20, 20, 0.4);
  opacity: 1;
  background-color: rgba(194, 48, 48, 0.8);
  color: #E7E7E7;
  transform: translate(1px, 10px);
}

.misc:hover {
  border: none;
  box-shadow: -1px 2px 1px rgba(39, 20, 20, 0.4);
  opacity: 1;
  background-color: rgba(255, 195, 0, 0.6);
  color: #8c6a65;
  transform: translate(1px, 10px);
}

.clicked-submit {
  background-color: green;
  color: white;
  box-shadow: -1px 10px 1px rgba(58, 140, 59, 0.7);
}

.clicked-delete {
  background-color: #c23030;
  box-shadow: -1px 10px 1px rgba(194, 48, 48, 0.4);
  color: white;
}

.clicked-misc {
  background-color: rgba(255, 195, 0, 0.8);
  box-shadow: -1px 10px 1px rgba(255, 195, 0, 0.4);
}


/*Downloaded from https://www.codeseek.co/skendrick366/push-buttons-qXpvaz */


$('.submit').on('click', function() {
  if ($(this).html() === 'Submitted') {
    $(this).html('Submit')
  } else {
    $(this).html('Submitted')
  }
  $(this).toggleClass('clicked-submit')
})

$('.delete').on('click', function() {
  if ($(this).html() === 'Deleted') {
    $(this).html('Delete')
  } else {
    $(this).html('Deleted')
  }
  $(this).toggleClass('clicked-delete')
})

$('.misc').on('click', function() {
  if ($(this).html() === 'Misc') {
    $(this).html('Still Misc')
  } else {
    $(this).html('Misc')
  }
  $(this).toggleClass('clicked-misc')
})

Comments