How to Create Cool Buttons with CSS

I created these cool buttons in CSS.

In this post, I will show you how to make them and give you the source code so you can use them on your site.

Step 1 - Create HTML buttons

Create the <button> in HTML:

<body>
  <button type="submit" class="button orange-button">hello</button>
  <button type="submit" class="button cool-button">cool</button>
  <button type="submit" class="button purple-button">button</button>
</body>

Give them classes like button so that you can style them on CSS.

Step 2 - Add Common Button Styles

Add these custom styles to override the default button styles.

:root {
  --button-width: 400px;
}

.button {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 50px;
  width: var(--button-width);
  max-width: 100%;
  border: 0;
  color: #fff;
  padding-block: 20px;
  cursor: pointer;
}

Now the button looks like this:

Step 3 - Add Specific Button Styles

Now that you have the overall shape of your button, it's time to color them.

I picked three different sets of colors from this website.

:root {
  --button-width: 400px;

  --button-bg: #DD6F24;
  --shadow-bg: #D36415;

  --button-2-bg: #6AD4DD;
  --button-2-shadow: #7AA2E3;

  --button-3-bg: #C65BCF;
  --button-3-shadow: #874CCC;
}

Create the shadow effect like this:

.orange-button {
  background-color: var(--button-bg);
  box-shadow: 
            var(--shadow-bg) 1px 1px 0,
            var(--shadow-bg) 2px 2px 0,
            var(--shadow-bg) 3px 3px 0,
            var(--shadow-bg) 4px 4px 0,
            var(--shadow-bg) 5px 5px 0,
            var(--shadow-bg) 6px 6px 0,
            var(--shadow-bg) 7px 7px 0,
            var(--shadow-bg) 8px 8px 0,
            var(--shadow-bg) 9px 9px 0,
            var(--shadow-bg) 10px 10px 0
            ;
}

Now the first button looks like this:

Do the same for all other buttons and you will have something like this:

Download the Source Code

Check out the source code, and download them for free here on my Gumroad page. The zip file contains all the code you can use on your projects.

\>>> Download hello cool button here <<<

If you would like to hire me for web development work, check out my /hire page.

Programmers Journey by Tamal Chowdhury