buttons CSS and examples

To style buttons, you can write CSS to make it look exactly the way you want. There is no right or wrong way to style buttons. And you can come up with many creative buttons in CSS.

Here I have included a couple of live examples that you can take as inspiration. Some of these buttons have animations. Hover your mouse on each of these buttons to see the animation in action.

Example #1

Example #2

Example #3

Example #4

Example #5

Example #6

Example #7

Example #8

Example #9

As you see above, I have created a couple of examples. Find the corresponding buttons CSS & HTML below.

HTML markup for all the buttons

<section class="btn-container">
  <div class="btn-example">
    <h3>Example #1</h3>
    <button class="example-1">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #2</h3>
    <button class="example-2">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #3</h3>
    <button class="example-3">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #4</h3>
    <button class="example-4">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #5</h3>
    <button class="example-5">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #6</h3>
    <button class="example-6">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #7</h3>
    <button class="example-7">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #8</h3>
    <button class="example-8">Learn more »</button>
  </div>
  <div class="btn-example">
    <h3>Example #9</h3>
    <button class="example-9">Learn more »</button>
  </div>
</section>

CSS for all the buttons

.btn-container {
  max-width: 900px;
  margin: 90px auto;
  background-color: #F2F2F2;
  padding: 30px 20px;
  border: 1px solid #dedede;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.btn-container .btn-example {
  margin: 20px 10px;
}
.btn-container button {
  cursor: pointer;
  padding: 10px 30px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
}
.btn-container button.example-1 {
  color: #FFFFFF;
  background-color: #0078D7;
  border: 1px solid #0264b3;
  transition: all 0.8s ease;
}
.btn-container button.example-1:hover {
  background-color: #015191;
  text-shadow: 1px 2px 2px #222222;
}
.btn-container button.example-2 {
  color: #FFFFFF;
  background-color: #fcba03;
  border: 1px solid #dba100;
  border-radius: 25px;
  transition: all 0.8s ease;
}
.btn-container button.example-2:hover {
  background-color: #dba100;
}
.btn-container button.example-3 {
  color: #FFFFFF;
  background-color: #f55c0a;
  border: 1px solid #d64e04;
  box-shadow: 2px 2px #222222;
  border-radius: 25px;
  transition: all 0.8s ease;
}
.btn-container button.example-3:hover {
  background-color: #d64e04;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-container button.example-4 {
  color: #000000;
  font-weight: 700;
  border: 1px solid #7f53ac;
  border-radius: 4px;
  display: inline-block;
  background-color: #d7b4fa;
  background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s;
}
.btn-container button.example-4:hover {
  background-position: 100% 100%;
  background-size: 100% 3px;
}
.btn-container button.example-5 {
  color: #FFFFFF;
  background-color: #42378f;
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
  border: 1px solid #d64e04;
  border-radius: 5px 35px 5px 35px;
  transition: all 0.8s ease;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-container button.example-5:hover {
  border-radius: 35px 5px 35px 5px;
  color: #FF9800;
  text-shadow: 2px 2px 2px #222222;
  font-size: 18.3px;
}
.btn-container button.example-6 {
  color: #FFFFFF;
  background-color: #3d3377;
  font-weight: 700;
  box-shadow: 0px 10px 11px rgba(0, 0, 0, 0.6), 1px 4px 0px rgba(31, 36, 78, 0.95);
  border: none;
  border-radius: 7px;
  transition: all 0.5s ease;
  transform: scale(0.9);
}
.btn-container button.example-6:hover {
  box-shadow: 0px 2px 0px rgba(29, 36, 78, 0.98), 0px 2px 3px rgba(0, 0, 0, .9);
  top: 6px;
  transform: scale(0.8) translateY(2px);
}
.btn-container button.example-7 {
  border: 1px solid #222222;
  font-weight: 700;
  background: linear-gradient(90deg, red, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  transition: all 0.9s ease;
}
.btn-container button.example-7:hover {
  background: linear-gradient(to left, #4A378B 34%, #F53844 65%) right;
  background-size: 300% 100%;
  color: blue;
  text-shadow: 2px 2px #FFFFFF;
}
.btn-container button.example-8 {
  background-color: #0cbaba;
  background-image: linear-gradient(315deg,#0cbaba 0,#380036 74%);
  padding: 10px 20px;
  max-width: 200px;
  display: block;
  text-align: center;
  color: #fff;
  border: none;
}
.btn-container button.example-9 {
  animation: change_color 2s infinite;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 1px 1px #222222;
  transition: all 0.8s ease-out;
}
.btn-container button.example-9:hover {
  border: 1px solid #FF9800;
  -webkit-animation: 0;
}
@keyframes change_color {
  0%   {color: red;}
  25%  {color: blue;}
  50%  {color: #FF9800;}
  75%  {color: green;}
  100% {color: red;}
}

Buttons are generally used with forms. And once you click the button, the form is going to submit. However, it does not mean that you are bound to use buttons only with forms. You can use them whenever you see fit.

Working on computer

But many of you may find problems when trying to add links to those buttons. If you want to know how to add links to those buttons, see another post on how to create an HTML button that works like a link.

Anyways, now you got a lot of buttons with different styles. You can easily change the colors, background, etc to match your brand. However, do not make them overstyled as they may not look professional. And even the buttons may not be user-friendly by doing over style.

Learn more about buttons

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Conclusion

Hopefully, you found better styles for buttons. I tried to make the HTML & CSS for those buttons easy to understand.

If you look at the HTML, each button has a number for example #1, #2, #3, and so on. Also, you will find these numbers in the CSS classes. For example “.example-2, .example-3”, etc.

I did this so you can find the corresponding CSS for specific buttons that you liked. Therefore, if you still have any issues or questions, please let me know.