0

So i have seen this button design that i really like https://codepen.io/lukemeyrick/pen/apZOWm

 $thick : 3px;
$pad : 0.7em;
$extra : calc(#{$pad} * 1.2);
$color : #f26522;

body {
  background: #2d2d2d;
}

a {
  position: fixed;
  cursor: pointer;
  top: 50vh;
  left: 50%;
  color: white;
  transform: translate3d(-50%,-50%,0);
  padding: $pad $extra;
  display: inline-block;
  border: $thick solid transparent;
  position: relative;
  font-size: 1.5em;
  letter-spacing: 0.07em;

  .text {
    // padding: 0 0.3em;
    font-family: proxima-nova;
    transform: translate3d(0,$pad,0);
    display: block;
    transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s;
  }

  &:after {
    position: absolute;
    content: '';
    bottom: -$thick;
    left: $extra;
    right: $extra;
    height: $thick;
    background: $color;
    z-index: -1;
    transition: 
      transform 0.8s cubic-bezier(1,0,.37,1) 0.2s,
      right 0.2s cubic-bezier(.04,.48,0,1) 0.6s,
      left 0.4s cubic-bezier(.04,.48,0,1) 0.6s;
    transform-origin: left;
  }

}

.line {
  position: absolute;
  background: $color;

  &.-right,
  &.-left {
    width: $thick;
    bottom: -$thick;
    top: -$thick;
    transform: scale3d(1,0,1);
  }  

  &.-top,
  &.-bottom {
    height: $thick;
    left: -$thick;
    right: -$thick;
    transform: scale3d(0,1,1);
  }

  &.-right {
    right: -$thick;
    transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s;
    transform-origin: top;
  }

  &.-top {
    top: -$thick;
    transition: transform 0.08s linear 0.43s;
    transform-origin: left;
  }

  &.-left {
    left: -$thick;
    transition: transform 0.08s linear 0.51s;
    transform-origin: bottom;
  }

  &.-bottom {
    bottom: -$thick;
    transition: transform 0.3s cubic-bezier(1,0,.65,1.01);
    transform-origin: right;
  }  
}

a:hover,
a:active {

  .text {
    transform: translate3d(0,0,0);
    transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s;
  }

  &:after {
    transform: scale3d(0,1,1);
    right: -$thick;
    left: -$thick;
    transform-origin: right;
    transition: 
      transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s,
      right 0.2s cubic-bezier(1,0,.65,1.01),
      left 0s 0.3s;
  }

  .line {
    transform: scale3d(1,1,1);

    &.-right {
      transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s;
      transform-origin: bottom;
    }

    &.-top {
      transition: transform 0.08s linear 0.4s;
      transform-origin: right;
    }

    &.-left {
      transition: transform 0.08s linear 0.48s;
      transform-origin: top;
    }

    &.-bottom {
      transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s;
      transform-origin: left;
    }
  }

}

and would like to use it on my WordPress website of http://hcldesign.co.uk/ in stead of the current main navigation menu.

Now this is SCSS and I am not if and how i would be able to use this on my site.

  1. Is it possible to add this button to my nav menu and how could i do this?
  2. Is it possible to convert the SCSS to CSS? Or use SCSS in WordPress.

Thanks,

Harvey

Harvey
  • 43
  • 1
  • 8
  • Yes, you can convert the SCSS to CSS. You can read more about SCSS here http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html. You can get the compiled css in the codepen, just click the right arrow on the CSS section and select View compiled CSS. – the_lorem_ipsum_guy Aug 03 '17 at 16:04
  • Okay so in the code on codepen it also has the HTML with the styles. These obviously are not to same as whats on my wordpress theme, any idea on how I can get this working with my theme or where and how i can add the styles? – Harvey Aug 03 '17 at 22:37
  • if you want to follow what's in the codepen, you need to add the span element in each of the anchor tag in your menu check this link https://wordpress.stackexchange.com/questions/216286/how-to-add-span-to-each-menu-link-with-link-text-to-data-attr then you can add the CSS in your styles.css. Try it first. – the_lorem_ipsum_guy Aug 04 '17 at 07:38
  • I'm not great with back end code. What code is it that i need to change from here? https://wordpress.stackexchange.com/questions/216286/how-to-add-span-to-each-menu-link-with-link-text-to-data-attr. What parts need changing within here (where do i reference the HTML classes i want to create) – Harvey Aug 04 '17 at 12:27

1 Answers1

0
  1. Yes sure, this should be possible, I don´t see why not
  2. If you want to convert it quickly you can use a tool like:

SCSS to CSS

Michael
  • 556
  • 2
  • 8