LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
up
CSS
@import url(//fonts.googleapis.com/css?family=Quicksand:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:700);
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:focus {
  outline: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block;
}

audio, canvas, picture, progress, video {
  display: inline-block;
}

template {
  display: none;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body {
  background-color: #333;
  font-family: 'Quicksand', sans-serif;
}

.hidden {
  display: none;
}

.u-isVisuallyHidden {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

.withanes {
  display: block;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 24px;
  height: 32px;
}
.withanes:after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 2px;
  height: 2px;
  box-shadow: 8px 2px #795f41, 10px 2px #795f41, 12px 2px #795f41, 14px 2px #795f41, 16px 2px #795f41, 18px 2px #795f41, 6px 4px #795f41, 8px 4px #795f41, 10px 4px #795f41, 12px 4px #795f41, 14px 4px #795f41, 16px 4px #795f41, 18px 4px #795f41, 20px 4px #795f41, 4px 6px #795f41, 6px 6px #795f41, 8px 6px #e9d8bc, 10px 6px #795f41, 12px 6px #795f41, 14px 6px #795f41, 16px 6px #795f41, 18px 6px #cbb490, 20px 6px #795f41, 22px 6px #795f41, 4px 8px #795f41, 6px 8px #e9d8bc, 8px 8px #e0c9a4, 10px 8px #e0c9a4, 12px 8px #e0c9a4, 14px 8px #e0c9a4, 16px 8px #e0c9a4, 18px 8px #cbb490, 20px 8px #cbb490, 22px 8px #795f41, 2px 10px #7e6f5d, 4px 10px #e9d8bc, 6px 10px #e0c9a4, 8px 10px #e0c9a4, 10px 10px #e0c9a4, 12px 10px #e0c9a4, 14px 10px #e0c9a4, 16px 10px #e0c9a4, 18px 10px #e0c9a4, 20px 10px #cbb490, 22px 10px #cbb490, 24px 10px #7e6f5d, 2px 12px #7e6f5d, 4px 12px #e9d8bc, 6px 12px #e0c9a4, 8px 12px #e0c9a4, 10px 12px #e0c9a4, 12px 12px #e0c9a4, 14px 12px #e0c9a4, 16px 12px #e0c9a4, 18px 12px #e0c9a4, 20px 12px #e0c9a4, 22px 12px #cbb490, 24px 12px #7e6f5d, 2px 14px #7e6f5d, 4px 14px #e9d8bc, 6px 14px #e0c9a4, 8px 14px #cbb490, 10px 14px #cbb490, 12px 14px #e0c9a4, 14px 14px #e0c9a4, 16px 14px #cbb490, 18px 14px #cbb490, 20px 14px #e0c9a4, 22px 14px #cbb490, 24px 14px #7e6f5d, 2px 16px #b6a281, 4px 16px #e9d8bc, 6px 16px #e0c9a4, 8px 16px #000000, 10px 16px #000000, 12px 16px #e9d8bc, 14px 16px #e0c9a4, 16px 16px #000000, 18px 16px #000000, 20px 16px #e0c9a4, 22px 16px #cbb490, 24px 16px #b6a281, 2px 18px #cbb490, 4px 18px #e9d8bc, 6px 18px #e0c9a4, 8px 18px #e0c9a4, 10px 18px #e0c9a4, 12px 18px #e9d8bc, 14px 18px #e0c9a4, 16px 18px #e0c9a4, 18px 18px #e0c9a4, 20px 18px #e0c9a4, 22px 18px #cbb490, 24px 18px #cbb490, 4px 20px #795f41, 6px 20px #e0c9a4, 8px 20px #e0c9a4, 10px 20px #e0c9a4, 12px 20px #e9d8bc, 14px 20px #e0c9a4, 16px 20px #e0c9a4, 18px 20px #e0c9a4, 20px 20px #e0c9a4, 22px 20px #795f41, 4px 22px #795f41, 6px 22px #e0c9a4, 8px 22px #e0c9a4, 10px 22px #e0c9a4, 12px 22px #cbb490, 14px 22px #cbb490, 16px 22px #e0c9a4, 18px 22px #e0c9a4, 20px 22px #cbb490, 22px 22px #795f41, 4px 24px #795f41, 6px 24px #795f41, 8px 24px #795f41, 10px 24px #795f41, 12px 24px #795f41, 14px 24px #795f41, 16px 24px #795f41, 18px 24px #795f41, 20px 24px #795f41, 22px 24px #795f41, 6px 26px #795f41, 8px 26px #795f41, 10px 26px #e0c9a4, 12px 26px #e0c9a4, 14px 26px #e0c9a4, 16px 26px #b6a281, 18px 26px #795f41, 20px 26px #795f41, 8px 28px #7e6f5d, 10px 28px #e0c9a4, 12px 28px #7e6f5d, 14px 28px #7e6f5d, 16px 28px #b6a281, 18px 28px #7e6f5d, 8px 30px #7e6f5d, 10px 30px #795f41, 12px 30px #7e6f5d, 14px 30px #7e6f5d, 16px 30px #795f41, 18px 30px #7e6f5d, 10px 32px #7e6f5d, 12px 32px #7e6f5d, 14px 32px #7e6f5d, 16px 32px #7e6f5d;
}

.withanes-name {
  box-sizing: border-box;
  position: absolute;
  bottom: 4px;
  right: 16px;
  padding: 5px 7px;
  /*     width: 0; */
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  background-color: white;
  opacity: 0;
  transform: translateX(0);
  color: black;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 250ms ease-in-out, width 0 linear 250ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.withanes-name:after {
  width: 0;
  height: 0;
  content: '';
  position: absolute;
  z-index: 2;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid white;
  position: absolute;
  top: calc(50% - 5px);
  right: -6px;
}

.withanes:hover .withanes-name {
  /*     width: 120px; */
  overflow: visible;
  opacity: 1;
  transform: translateX(-20px) rotate(0deg);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.33);
  transition: opacity 125ms ease-in-out 100ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.withanes:hover:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -20px;
}

.withanes-name > .heart {
  margin: 0 3px;
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #D13E35;
  transform: rotate(45deg);
}
.withanes-name > .heart:before, .withanes-name > .heart:after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  background-color: #D13E35;
  border-radius: 50%;
}
.withanes-name > .heart:before {
  left: -3px;
}
.withanes-name > .heart:after {
  top: -3px;
}

.grid {
  display: block;
  /* IE9 fallback for Flex */
  display: flex;
  /* Using Flex for equal height containers */
  flex-wrap: wrap;
  /* Children need to wrap */
  margin-top: -20px;
  margin-left: -20px;
  align-items: stretch;
  /* For equal height */
  font-size: 0;
  /* Horiontal gap fix for inline-block fallback */
}

.grid + .grid {
  margin-top: 0;
  /* reset margin on stacked grids */
}

.grid-col {
  box-sizing: border-box;
  /* Using box-sizing so padding doesn't affect width */
  display: inline-block;
  /* IE9 fallback */
  width: 100%;
  padding-top: 20px;
  padding-left: 20px;
  vertical-align: top;
  font-size: 16px;
  /* Resetting font-size for horizontal gap fix */
}

.grid-col_1of12 {
  width: 8.33333%;
}

.grid-col_2of12 {
  width: 16.66667%;
}

.grid-col_3of12 {
  width: 25%;
}

.grid-col_4of12 {
  width: 33.33333%;
}

.grid-col_5of12 {
  width: 41.66667%;
}

.grid-col_6of12 {
  width: 50%;
}

.grid-col_7of12 {
  width: 58.33333%;
}

.grid-col_8of12 {
  width: 66.66667%;
}

.grid-col_9of12 {
  width: 75%;
}

.grid-col_10of12 {
  width: 83.33333%;
}

.grid-col_11of12 {
  width: 91.66667%;
}

.grid-col_12of12 {
  width: 100%;
}

@media (min-width: 768px) {
  .grid-col_1of12SM {
    width: 8.33333%;
  }

  .grid-col_2of12SM {
    width: 16.66667%;
  }

  .grid-col_3of12SM {
    width: 25%;
  }

  .grid-col_4of12SM {
    width: 33.33333%;
  }

  .grid-col_5of12SM {
    width: 41.66667%;
  }

  .grid-col_6of12SM {
    width: 50%;
  }

  .grid-col_7of12SM {
    width: 58.33333%;
  }

  .grid-col_8of12SM {
    width: 66.66667%;
  }

  .grid-col_9of12SM {
    width: 75%;
  }

  .grid-col_10of12SM {
    width: 83.33333%;
  }

  .grid-col_11of12SM {
    width: 91.66667%;
  }

  .grid-col_12of12SM {
    width: 100%;
  }
}
@media (min-width: 960px) {
  .grid-col_1of12MD {
    width: 8.33333%;
  }

  .grid-col_2of12MD {
    width: 16.66667%;
  }

  .grid-col_3of12MD {
    width: 25%;
  }

  .grid-col_4of12MD {
    width: 33.33333%;
  }

  .grid-col_5of12MD {
    width: 41.66667%;
  }

  .grid-col_6of12MD {
    width: 50%;
  }

  .grid-col_7of12MD {
    width: 58.33333%;
  }

  .grid-col_8of12MD {
    width: 66.66667%;
  }

  .grid-col_9of12MD {
    width: 75%;
  }

  .grid-col_10of12MD {
    width: 83.33333%;
  }

  .grid-col_11of12MD {
    width: 91.66667%;
  }

  .grid-col_12of12MD {
    width: 100%;
  }
}
.blocks {
  margin: -30px 0 0 -30px;
  /* offset blocks horizontal and vertical spacing - must match padding of blocks items */
  font-size: 0;
  /* remove inline block whitespace */
}

.blocks > * {
  box-sizing: border-box;
  display: inline-block;
  padding: 30px 0 0 30px;
  /* space blocks horizontally and vertically - offset is handled by .blocks */
  font-size: 16px;
  /* return the font size */
}

.blocks_2up > * {
  width: 50%;
}

.blocks_3up > * {
  width: 33.33333%;
}

.blocks_4up > * {
  width: 25%;
}

.u-srOnly {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

body {
  background: #333;
  font-family: 'Lato', sans-serif;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -60px;
  display: inline-block;
  font-size: 26px;
  color: #b3c33a;
  text-align: center;
  width: 120px;
  height: 60px;
  line-height: 60px;
  border: 5px solid #b3c33a;
  overflow: hidden;
  text-transform: uppercase;
  cursor: pointer;
  transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, border-radius 0.25s ease-in-out, color 0.25s ease-in-out;
}
.arrow:hover, .arrow.auto {
  width: 60px;
  margin-left: -30px;
  border-radius: 40px;
  color: rgba(179, 195, 58, 0);
  transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, border-radius 1s 0.25 ease-in-out, color 0.25s ease-in-out 0.25s;
}
.arrow:hover:before, .arrow.auto:before {
  animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.arrow:hover:after, .arrow.auto:after {
  animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.arrow:before {
  position: absolute;
  display: inline-block;
  content: "";
  background: #b3c33a;
  width: 5px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -3px;
  transform: translateY(50px);
}
.arrow:after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  color: #b3c33a;
  border-top: 5px solid;
  border-left: 5px solid;
  transform: rotateZ(45deg);
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -13px;
  transform: translateY(50px) rotateZ(45deg);
}

@keyframes tipUp {
  0% {
    transform: translateY(50px) rotateZ(45deg);
  }
  100% {
    transform: translateY(-70px) rotateZ(45deg);
  }
}
@keyframes lineUp {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-70px);
  }
}
JS
/*
  ICON AUTO PLAYS
  HOVER OVER ICON
  TO MAKE IT INTERACTIVE
*/

upInteractive = false;

function autoToggle() {
  $('.arrow').toggleClass('auto');
}

$('.arrow').hover(function() {
  upInteractive = true;
  $('.arrow').removeClass('auto');
});

setInterval(function(){ 
  
  console.log(upInteractive);
  
  if(upInteractive === false) {
    autoToggle();
  }

},2000);
Host Instantly Drag and Drop Website Builder

 

Description

Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.
Term
Mon, 11/27/2017 - 21:46

Related Codes

Pen ID
Pen ID
Pen ID