Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container#novation
  main
    #novation__content
      .novation__ttl NU MIDI Controller
      .novation__btn
        .novation__btn--up
        .novation__btn--down
        .novation__btn--right
        .novation__btn--left
        .novation__btn--no1
        .novation__btn--no2
        .novation__btn--no3
        .novation__btn--no4
        .novation__btn--space
      .novation__btn--1
        .adobe.novation__btn--pf
          span Pf
        .adobe.novation__btn--en
          span En
        .adobe.novation__btn--ps
          span Ps
        .adobe.novation__btn--ae
          span Ae
        .adobe.novation__btn--pr
          span Pr
        .adobe.novation__btn--ch
          span Ch
        .adobe.novation__btn--ic
          span Ic
        .adobe.novation__btn--id
          span Id
        .novation__btn--play
      .novation__btn--2
        .adobe.novation__btn--xd
          span Xd
        .adobe.novation__btn--st
          span St
        .adobe.novation__btn--fl
          span Fl
        .adobe.novation__btn--an
          span An
        .adobe.novation__btn--ai
          span Ai
        .adobe.novation__btn--fs
          span Fs
        .adobe.novation__btn--br
          span Br
        .adobe.novation__btn--sp
          span Sp
        .novation__btn--play
      .novation__btn--3
        .adobe.novation__btn--sy
          span Sy
        .adobe.novation__btn--fw
          span Fw
        .adobe.novation__btn--mu
          span Mu
        .adobe.novation__btn--dw
          span Dw
        .adobe.novation__btn--tl
          span Tk
        .adobe.novation__btn--cp
          span Cp
        .adobe.novation__btn--dn
          span Dn
        .adobe.novation__btn--rh
          span Rh
        .novation__btn--play
      .novation__btn--4
        .adobe.novation__btn--au
          span Au
        .adobe.novation__btn--sg
          span Sg
        .adobe.novation__btn--pl
          span Pl
        .adobe.novation__btn--cf
          span Cf
        .adobe.novation__btn--lr
          span Lr
        .adobe.novation__btn--sc
          span Sc
        .adobe.novation__btn--fb
          span Eb
        .adobe.novation__btn--me
          .novation__btn--me__inner
            .novation__btn--me__left
            .novation__btn--me__right
        .novation__btn--play
              
            
!

CSS

              
                div,span,main {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: "Open Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/**************
content
**************/
#novation {
  background-repeat: no-repeat;
  padding: 49% 0 0;
  width: 100%;
  margin: 0;
}
#novation__content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 80vw;
  background-color: #151B2C;
  padding: .5% 2% 2% 2%;
  opacity: 1;
  border-radius: 1vw;
  box-shadow: -1vw 1vw 1vw, -0.1vw 0.1vw 0vw, -0.2vw 0.2vw 0vw, -0.3vw 0.3vw 0vw, -0.4vw 0.4vw 0vw, -0.5vw 0.5vw 0vw, -0.6vw 0.6vw 0vw, -0.7vw 0.7vw 0vw;
}
#novation__content .novation__ttl{
  color: white;
  margin: 1% 1%;
  font-size: 3vw;
  font-weight: bold;
}
#novation__content div[class*='novation__btn'] {
  flex-wrap:wrap;
  width: 100%;
  display: flex;
  background-color: transparent;
  position: relative;
}
#novation__content .novation__btn > div[class*='novation__btn'] {
  content: '';
  width: calc(calc(100% / 9) - 4%);
  padding: 3.42543% 0;
  background-color: #1B1A1E;
  position: relative;
  border-radius: 50%;
  border: .1vw solid #a29eb0;
  box-shadow: -0.15vw 0.15vw 0 0 #a29eb0;
  z-index: 2;
  display: inline-block;
  margin: 1% 2%;
  top: 0%;
  left: 0%;
  font-size: 1vw;
  line-height: 0;
  text-align: center;
}
#novation__content .novation__btn > div[class*='novation__btn']:last-child {
  background-color: transparent;
  border:none;
  box-shadow: none;
}
#novation__content .novation__btn > div[class*='novation__btn']:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1vw 1.73vw 1vw;
  border-color: transparent transparent white transparent;
  position:absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
#novation__content .novation__btn > div.novation__btn--up:after{
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
#novation__content .novation__btn > div.novation__btn--down:after{
  -webkit-transform: translateY(-50%) translateX(-50%) rotate( 180deg );
          transform: translateY(-50%) translateX(-50%) rotate( 180deg );
}
#novation__content .novation__btn > div.novation__btn--right:after{
  -webkit-transform: translateY(-50%) translateX(-50%) rotate( 270deg );
          transform: translateY(-50%) translateX(-50%) rotate( 270deg );
}
#novation__content .novation__btn > div.novation__btn--left:after{
  -webkit-transform: translateY(-50%) translateX(-50%) rotate( 90deg );
          transform: translateY(-50%) translateX(-50%) rotate( 90deg );
}
#novation__content .novation__btn > div[class*='novation__btn--no']:after {
  text-align: center;
  border: none;
  width: auto;
  height: auto;
  color: white;
  font-size: 1vw;
}
#novation__content .novation__btn > div.novation__btn--no1:after{
  content: 'Session';
}
#novation__content .novation__btn > div.novation__btn--no2:after{
  content: 'note';
}
#novation__content .novation__btn > div.novation__btn--no3:after{
  content: 'chord';
}
#novation__content .novation__btn > div.novation__btn--no4:after{
  content: 'Curation';
}
#novation__content .novation__btn > div.novation__btn--space:after {
  content: none;
  border: none;
  width: auto;
  height: auto;
}
#novation__content .adobe[class*='novation__btn--'] {
  position: relative;
  font-size: 2.5vw;
  background-color: white;
  display: block;
  margin: 1% 1%;
  width: calc(calc(100% / 9) - 2%);
  box-shadow: inset 0 0 0 .5vw;
  box-sizing: border-box;
}
#novation__content .adobe[class*='novation__btn--'] span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: auto;
  font-weight: 600;
  text-align: center;
  font-size: 3.2vw;
}
#novation__content .adobe[class*='novation__btn--']:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0.4;
  z-index: 10;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(1):before {
  animation: 3.5s linear infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(2):before {
  animation: 3.5s linear .5s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(3):before {
  animation: 3.5s linear 1s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(4):before {
  animation: 3.5s linear 1.5s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(5):before {
  animation: 3.5s linear 2s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(6):before {
  animation: 3.5s linear 2.5s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(7):before {
  animation: 3.5s linear 3s infinite bg-adobe;
}
#novation__content div[class*='novation__btn--'] > .adobe[class*='novation__btn--']:nth-of-type(8):before {
  animation: 3.5s linear 3.5s infinite bg-adobe;
}

@keyframes bg-adobe {
  0% { background-color: transparent; }
  50% { background-color: white; }
  100% { background-color: transparent; }
}

#novation__content .adobe.novation__btn--pf{
  box-shadow: inset 0 0 0 0.5vw #4CADFF, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #051634;
}
#novation__content .adobe.novation__btn--pf span {
  color: #4CADFF;
}

#novation__content .adobe.novation__btn--en{
  box-shadow: inset 0 0 0 0.5vw #92A5FF, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #464183;
}
#novation__content .adobe.novation__btn--en span {
    color: #92A5FF;
}

#novation__content .adobe.novation__btn--ps{
  box-shadow: inset 0 0 0 0.5vw #84BAF8, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #252455;
}
#novation__content .adobe.novation__btn--ps span {
    color: #84BAF8;
}

#novation__content .adobe.novation__btn--ae{
  box-shadow: inset 0 0 0 0.5vw #c07ff7, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #242551;
}
#novation__content .adobe.novation__btn--ae span{
  color: #c07ff7;
}

#novation__content .adobe.novation__btn--pr{
  box-shadow: inset 0 0 0 0.5vw #D36EF7, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #252455;
}
#novation__content .adobe.novation__btn--pr span{
  color: #D36EF7;
}

#novation__content .adobe.novation__btn--ch{
  box-shadow: inset 0 0 0 0.5vw #de88ff, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #27003d;
}
#novation__content .adobe.novation__btn--ch span{
  color: #de88ff;
}

#novation__content .adobe.novation__btn--ic{
  box-shadow: inset 0 0 0 0.5vw #ff56fc, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #2a0026;
}
#novation__content .adobe.novation__btn--ic span{
  color: #ff56fc;
}

#novation__content .adobe.novation__btn--id{
  box-shadow: inset 0 0 0 0.5vw #e8419b, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #252455;
}
#novation__content .adobe.novation__btn--id span{
  color: #e8419b;
}

#novation__content .adobe.novation__btn--xd{
  box-shadow: inset 0 0 0 0.5vw #FF1CC1, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #2D001F;
}
#novation__content .adobe.novation__btn--xd span{
  color: #FF1CC1;
}

#novation__content .adobe.novation__btn--st{
  box-shadow: inset 0 0 0 0.5vw #FE4071, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #2F0009;
}
#novation__content .adobe.novation__btn--st span{
  color: #FE4071;
}

#novation__content .adobe.novation__btn--fl{
  box-shadow: inset 0 0 0 0.5vw #C10000, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #2E231F;
}
#novation__content .adobe.novation__btn--fl span{
  color: #C10000;
}

#novation__content .adobe.novation__btn--an{
  box-shadow: inset 0 0 0 0.5vw #FF4800, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #250700;
}
#novation__content .adobe.novation__btn--an span{
  color: #ff4800;
}

#novation__content .adobe.novation__btn--ai{
  box-shadow: inset 0 0 0 0.5vw #FF7A00, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #261301;
}
#novation__content .adobe.novation__btn--ai span{
  color: #FF7A00;
}

#novation__content .adobe.novation__btn--fs{
  box-shadow: inset 0 0 0 0.5vw #FF9300, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #180D07;
}
#novation__content .adobe.novation__btn--fs span{
  color: #FF9300;
}

#novation__content .adobe.novation__btn--br{
  box-shadow: inset 0 0 0 0.5vw #FCB600, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #271C00;
}
#novation__content .adobe.novation__btn--br span{
  color: #FCB600;
}

#novation__content .adobe.novation__btn--sp{
  box-shadow: inset 0 0 0 0.5vw #fddc00, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #272002;
}
#novation__content .adobe.novation__btn--sp span{
  color: #fddc00;
}

#novation__content .adobe.novation__btn--sy{
  box-shadow: inset 0 0 0 0.5vw #FFE800, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #151200;
}
#novation__content .adobe.novation__btn--sy span{
  color: #FFE800;
}

#novation__content .adobe.novation__btn--fw{
  box-shadow: inset 0 0 0 0.5vw #E1D400, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #534D23;
}
#novation__content .adobe.novation__btn--fw span{
  color: #E1D400;
}

#novation__content .adobe.novation__btn--mu{
  box-shadow: inset 0 0 0 0.5vw #d5ea41, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #1D1C38;
}
#novation__content .adobe.novation__btn--mu span{
  color: #d5ea41;
}

#novation__content .adobe.novation__btn--dw{
  box-shadow: inset 0 0 0 0.5vw #AAFE00, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #072600;
}
#novation__content .adobe.novation__btn--dw span{
  color: #AAFE00;
}

#novation__content .adobe.novation__btn--tl{
  box-shadow: inset 0 0 0 0.5vw #81E800, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #0F3F00;
}
#novation__content .adobe.novation__btn--tl span{
  color: #81E800;
}

#novation__content .adobe.novation__btn--cp{
  box-shadow: inset 0 0 0 0.5vw #00E972, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #01160b;
}
#novation__content .adobe.novation__btn--cp span{
  color: #00E972;
}

#novation__content .adobe.novation__btn--dn{
  box-shadow: inset 0 0 0 0.5vw #2DF2A5, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #04261d;
}
#novation__content .adobe.novation__btn--dn span{
  color: #E0FFFC;
}

#novation__content .adobe.novation__btn--rh{
  box-shadow: inset 0 0 0 0.5vw #00e8d0, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #001211;
}
#novation__content .adobe.novation__btn--rh span{
  color: #00e8d0;
}

#novation__content .adobe.novation__btn--au{
  box-shadow: inset 0 0 0 0.5vw #25e7d8, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #252455;
}
#novation__content .adobe.novation__btn--au span{
  color: #25e7d8;
}

#novation__content .adobe.novation__btn--sg{
  box-shadow: inset 0 0 0 0.5vw #01ede7, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #002726;
}
#novation__content .adobe.novation__btn--sg span{
  color: #01ede7;
}

#novation__content .adobe.novation__btn--pl{
  box-shadow: inset 0 0 0 0.5vw #03D8FF, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #002025;
}
#novation__content .adobe.novation__btn--pl span{
  color: #03D8FF;
}

#novation__content .adobe.novation__btn--cf{
  box-shadow: inset 0 0 0 0.5vw #CBDBFF, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #000C33;
}
#novation__content .adobe.novation__btn--cf span{
  color: #CBDBFF;
}

#novation__content .adobe.novation__btn--lr{
  box-shadow: inset 0 0 0 0.5vw #97C5CC, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #252455;
}
#novation__content .adobe.novation__btn--lr span{
  color: #97C5CC;
}

#novation__content .adobe.novation__btn--sc{
  box-shadow: inset 0 0 0 0.5vw #c3b4d9, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #322C33;
}
#novation__content .adobe.novation__btn--sc span{
  color: #c3b4d9;
}

#novation__content .adobe.novation__btn--fb{
  box-shadow: inset 0 0 0 0.5vw #B2A0A7, -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  background-color: #2E2B2C;
}
#novation__content .adobe.novation__btn--fb span{
  color: #B2A0A7;
}

#novation__content .adobe.novation__btn--me{
  background-color: #FFFFFF;
  background: #FA0F01;
  box-shadow: -0.05vw 0.05vw 0 0 #a29eb0, -0.1vw 0.1vw 0 0 #a29eb0, -0.15vw 0.15vw 0 0 #a29eb0, -0.2vw 0.2vw 0 0 #a29eb0, -0.25vw 0.25vw 0 0 #a29eb0, -0.3vw 0.3vw 0 0 #a29eb0;
  width: calc(calc(100% / 9) - 2%);
  margin: 1% 1%;
  font-size: 0;
}
#novation__content .adobe.novation__btn--me:after {
  content: '';
  background-size: 100%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#novation__content .adobe .novation__btn--me__inner {
  position: absolute;
  margin: 0;
  box-shadow: none;
  background-color:white;
  width: 50%;
  height: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
  overflow: hidden;
  font-size: 0;
}
#novation__content .adobe .novation__btn--me__left {
  background: #FA0F01;
  width: 30%;
  height: 110%;
  transform: skewX(23deg);
  left: 52%;
  position: absolute;
  box-shadow: none;
  margin: 0;
  border-radius: 50% 0 0 0;
  top: -5%;
}
#novation__content .adobe .novation__btn--me__right {
  background: #FA0F01;
  width: 30%;
  height: 110%;
  transform: skewX(-23deg);
  left: 19%;
  position: absolute;
  box-shadow: none;
  margin: 0;
  top: -5%;
  border-radius: 0% 50% 0 0;
}
#novation__content .adobe .novation__btn--me__right:after {
  content: '';
  background: #FA0F01;
  position: absolute;
  width: 150%;
  height: 25%;
  transform: skewX(40deg);
  top: 75%;
  left: 50%;
}
#novation__content div[class*='novation__btn'] .novation__btn--play{
  content: '';
  width: calc(calc(100% / 9) - 4%);
  padding: 3.42543% 0;
  background-color: #1B1A1E;
  position: relative;
  border-radius: 50%;
  border: .1vw solid #a29eb0;
  box-shadow: -0.15vw 0.15vw 0 0 #a29eb0;
  z-index: 2;
  display: inline-block;
  margin: 2% 2%;
  top: 0%;
  left: 0%;
  font-size: 1vw;
  line-height: 0;
  text-align: center;
}
#novation__content div[class*='novation__btn'] .novation__btn--play:after {
  content: '';
  position: absolute;
  border: 0px solid white;
  border-left-width: .2vw;
  border-top-width: .2vw;
  width: 1.5vw;
  height: 1.5vw;
  top: 50%;
  left: calc(50% - .3vw);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate( 135deg );
          transform: translateX(-50%) translateY(-50%) rotate( 135deg );
}

@media screen and (max-width: 979px) {
  #novation__content .novation__btn > div[class*='novation__btn--no']:after {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(.5);
    transform: translateY(-50%) translateX(-50%) scale(.5);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console