Buttons

.3d-btn-yellow

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-yellow

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-yellow

HTML


<div id="3d-btn-yellow">
   <a href="#">
      <button class="pushable">
         <div class="shadow"></div>
         <div class="edge-yellow"></div>
         <div class="front-yellow">.3d-btn-yellow</div>
      </button>
   </a>
</div>

CSS


.edge-yellow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      hsl(60deg 50% 47%) 0%,
      hsl(60deg 50% 47%) 8%,
      hsl(60deg 50% 47%) 92%,
      hsl(60deg 50% 47%) 100%
    );
  }
  .front-yellow {
    display: block;
    position: relative;
    font-family: 'lato', serif;
    font-size: 1.25rem;
    padding: 12px 42px;
    border-radius: 12px;
    color: white;
    background: var(--clr-yellow);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
    cursor: pointer;
  }
 .pushable:hover .front-yellow {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .front-yellow {
    transform: translateY(-2px);
    transition: transform 34ms;
  }

.3d-btn-green

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-light-pink

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-med-pink

USE CASES

CTA in the menu
Use case 2
Use case 3
Use case 4

.3d-btn-neon-red

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-dark-red

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

.3d-btn-purple

USE CASES

Use case 1
Use case 2
Use case 3
Use case 4

Primary colors | Shades | Hex Codes | hsl

Primary colors and shades

Yellow

--clr-yellow: #f6d34e

--clr-yellow-100: #fdf6dc

--clr-yellow-200: #fbedb8

--clr-yellow-300: #fae595

--clr-yellow-400: #f8dc71

--clr-yellow-500: #f6d34e

--clr-yellow-600: #c5a93e

--clr-yellow-700: #947f2f

--clr-yellow-800: #62541f

--clr-yellow-900: #312a10

Green

--clr-green: #e2e24c

--clr-green-100: #f9f9db

--clr-green-200: #f3f3b7

--clr-green-300: #eeee94

--clr-green-400: #e8e870

--clr-green-500: #e2e24c

--clr-green-600: #b5b53d

--clr-green-700: #88882e

--clr-green-800: #5a5a1e

--clr-green-900: #2d2d0f

Light Pink

--clr-light-pink: #edb3b4

--clr-light-pink-100: #fbf0f0

--clr-light-pink-200: #f8e1e1

--clr-light-pink-300: #f4d1d2

--clr-light-pink-400: #f1c2c3

--clr-light-pink-500: #edb3b4

--clr-light-pink-600: #be8f90

--clr-light-pink-700: #8e6b6c

--clr-light-pink-800: #5f4848

--clr-light-pink-900: #2f2424

Neon red

--clr-neon-red: #e81154

--clr-neon-red-50: #fab7cc

--clr-neon-red-100: #f8a4be

--clr-neon-red-200: #f67ea3

--clr-neon-red-300: #f17098

--clr-neon-red-400: #f0326d

--clr-neon-red-500: #e81154

--clr-neon-red-600: #b40d41

--clr-neon-red-700: #7f092e

--clr-neon-red-800: #4b061b

--clr-neon-red-900: #170208

Dark red

--clr-neon-red: #c0004d

--clr-neon-red-50: #ff79af

--clr-neon-red-100: #ff64a2

--clr-neon-red-200: #ff3b8a

--clr-neon-red-300: #ff1371

--clr-neon-red-400: #e9005d

--clr-neon-red-500: #c0004d

--clr-neon-red-600: #880037

--clr-neon-red-700: #500020

--clr-neon-red-800: #18000a

--clr-neon-red-900: #000000

Purple

--clr-purple-palette: #370226

--clr-purple-palette-50: #f84ac0

--clr-purple-palette-100: #f836ba

--clr-purple-palette-200: #f60fac

--clr-purple-palette-300: #d40893

--clr-purple-palette-400: #ad0678

--clr-purple-palette-500: #86055c

--clr-purple-palette-600: #5e0341

--clr-purple-palette-700: #370226

--clr-purple-palette-800: #010001

--clr-purple-palette-900: #000000

Gray

--clr-gray-50: #151a1e

--clr-gray-100: #2b333b

--clr-gray-200: #39444d

--clr-gray-300: #4d5e6b

--clr-gray-400: #59677e

--clr-gray-500: #657991

--clr-gray-600: #788da3

--clr-gray-700: #9ba9b6

--clr-gray-800: #c2c6cc

--clr-gray-900: #e1e2e5

--clr-gray-1000: #f4f4f5

Typeography

Header 1

ACCENT FONT PRIMARY

Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 2

ACCENT FONT PRIMARY

Accent font secondary

Header 3

ACCENT FONT PRIMARY

Accent font secondary

Header 4

ACCENT FONT PRIMARY

Accent font secondary

Header 5

ACCENT FONT PRIMARY

Accent font secondary

Header 6

ACCENT FONT PRIMARY

Accent font secondary

My notes

Typeography

https://www.figma.com/file/JLYxOj0xhVaJQSmORUsBam/Typography-Checklist?node-id=0%3A1&t=ScnazGGIN1G8B8zh-0

Rules

Header font - Playfair ✅

Body font - Georgia/Montserrat ✅

Accent font (on bold)- Lato ✅

Accent font 2 (on italic) - caliway regular ✅

Desktop - Paragraphs are 50-75ch wide ✅
Body Font size - 17-23 px ✅
Body Line height 25-31 px7 ✅
Paragraph spacing 7-18px ✅
Header font size - 55 - 75px ✅
Accent font - uppercase, bold, letter spacing 0.4px, opacity 75-90%, font-size 17-18px ✅
White space - When adding whitespace in a design like this, think of one simple rule: outer spacing is greater than inner spacing.
The space between any group of related elements should be greater than the space within the group ✅

Cards

Shadows

Note - you may need to use

margin: 0px;

max-width: 100%;

box-shadow: 6px 6px 1px 1px #dddddd;

box-shadow: 20px 20px 1px 1px #dddddd;

box-shadow: 30px 30px 5px 1px #dddddd;

box-shadow: 10px 10px 20px 1px var(--clr-gray-100);

box-shadow: 10px 10px 20px -8px var(--clr-gray-100);

box-shadow: 30px 30px 5px 1px #dddddd;

box-shadow: var(--shadow-elevation-low);

box-shadow: var(--shadow-elevation-medium);

box-shadow: var(--shadow-elevation-high);

Angled backgrounds

https://www.youtube.com/watch?v=hWGgw1K-i8Y

Cards - try shadow from josh comeau with button animation

Or use this https://www.joshwcomeau.com/animation/css-transitions/

Organize by static, dynamic and interactive elements

container 16px for cell phone ✅

menus

Program the editor so the color swatch has brand colors in it

Illustrations - https://designstripe.com/

Mouseover buttons like the sketch and psd buttons for outline button in menu - https://cssgradient.io/gradient-backgrounds/

Click to copy class name or text expander keyboard shortcut to clioboard

forms fields formatted like a phone app. Address bar of chrome on my windows laptop

Ornaments

Graphics/Watermarks/logos/icons

Gradients - https://cssgradient.io/

Proper color combinations for all elements

Spacing/whitespace

background colors

dark mode

asides

drop shadows

map out sections based on design concepts like this - https://typ.io/s/8p11

Buttons ✅

https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html

hover states https://www.joshwcomeau.com/snippets/html/scale-with-pseudoelements/

Buttons

.3d-btn-yellow

USE CASES

.3d-btn-yellow

USE CASES

Use case 1Use case 2Use case 3Use case 4

.3d-btn-yellow

HTML

CSS

.3d-btn-green

USE CASES

Use case 1Use case 2Use case 3Use case 4

.3d-btn-light-pink

USE CASES

Use case 1Use case 2Use case 3Use case 4

.3d-btn-med-pink

USE CASES

CTA in the menuUse case 2Use case 3Use case 4

.3d-btn-neon-red

USE CASES

Use case 1Use case 2Use case 3Use case 4

.3d-btn-dark-red

USE CASES

Use case 1Use case 2Use case 3Use case 4

.3d-btn-purple

USE CASES

Use case 1Use case 2Use case 3Use case 4

Primary colors | Shades | Hex Codes | hsl

Primary colors and shades

Yellow

Green

Light Pink

Neon red

Dark red

Purple

Gray

Typeography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

My notes

Cards

Shadows

Angled backgrounds

Use case 1
Use case 2
Use case 3
Use case 4

Use case 1
Use case 2
Use case 3
Use case 4

Use case 1
Use case 2
Use case 3
Use case 4

CTA in the menu
Use case 2
Use case 3
Use case 4

Use case 1
Use case 2
Use case 3
Use case 4

Use case 1
Use case 2
Use case 3
Use case 4

Use case 1
Use case 2
Use case 3
Use case 4