Breaking News: Grepper is joining You.com. Read the official announcement!

nice css button design

MasterMind answered on September 29, 2020 Popularity 10/10 Helpfulness 5/10

answer nice css button design

related html css good button

nice css button design

Comment

Really cool button design with cool CSS root color templete at the end ;)


button {
     appearance: button;
     backface-visibility: hidden;
     background-color: #405cf5;
     border-radius: 6px;
     border-width: 0;
     box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .1) 0 2px 5px 0, rgba(0, 0, 0, .07) 0 1px 1px 0;
     box-sizing: border-box;
     color: #fff;
     cursor: pointer;
     font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
     font-size: 100%;
     height: 44px;
     line-height: 1.15;
     margin: 12px 0 0;
     outline: none;
     overflow: hidden;
     padding: 0 25px;
     position: relative;
     text-align: center;
     text-transform: none;
     transform: translateZ(0);
     transition: all .2s, box-shadow .08s ease-in;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     width: 100%;
}

button:disabled {
     cursor: default;
}

button:focus {
     box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

button:hover {
     background-color: #E01E79;
     border: 2px solid white;
     font-weight: 500;
}





## JUST COOL TO HAVE :)

:root {
    
    /* dark shades of primary color*/
    --clr-primary-1: hsl(205, 86%, 17%);
    --clr-primary-2: hsl(205, 77%, 27%);
    --clr-primary-3: hsl(205, 72%, 37%);
    --clr-primary-4: hsl(205, 63%, 48%);
    /* primary/main color */
    --clr-primary-5: #49a6e9;
    /* lighter shades of primary color */
    --clr-primary-6: hsl(205, 89%, 70%);
    --clr-primary-7: hsl(205, 90%, 76%);
    --clr-primary-8: hsl(205, 86%, 81%);
    --clr-primary-9: hsl(205, 90%, 88%);
    --clr-primary-10: hsl(205, 100%, 96%);
    /* darkest grey - used for headings */
    --clr-grey-1: hsl(209, 61%, 16%);
    --clr-grey-2: hsl(211, 39%, 23%);
    --clr-grey-3: hsl(209, 34%, 30%);
    --clr-grey-4: hsl(209, 28%, 39%);
    /* grey used for paragraphs */
    --clr-grey-5: hsl(210, 22%, 49%);
    --clr-grey-6: hsl(209, 23%, 60%);
    --clr-grey-7: hsl(211, 27%, 70%);
    --clr-grey-8: hsl(210, 31%, 80%);
    --clr-grey-9: hsl(212, 33%, 89%);
    --clr-grey-10: hsl(210, 36%, 96%);
    --clr-white: #fff;
    --clr-red-dark: hsl(360, 67%, 44%);
    --clr-red-light: hsl(360, 71%, 66%);
    --clr-green-dark: hsl(125, 67%, 44%);
    --clr-green-light: hsl(125, 71%, 66%);
    --clr-gold: #c59d5f;
    --clr-black: #222;
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Open Sans", sans-serif;
    --transition: all 0.3s linear;
    --spacing: 0.25rem;
    --radius: 0.5rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --fixed-width: 620px;
  }

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: button css nice

Link to this answer
Share Copy Link

Contributed on Nov 22 2022

MasterMind

0 Answers Avg Quality 2/10

Closely Related Answers

html css good button

Comment

<button style="background-color: turquoise; border: none; border-radius: 5px; color: #333; /* Dark grey */ padding: 15px 32px">Example button</button>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Sep 29 2020

hateschoollovecoding

0 Answers Avg Quality 2/10

nice css button design

Contents

More Related Answers

nice css button design

Closely Related Answers

html css good button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.