css web button properties

2026June21

Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
Online web design, along with everything you need for a complete website.
css web button properties tutorial.Css basic button styling,Learn how to style all web buttons using CSS.

css basic web button styling

basic web button code


<style>
.but {
  background-color: #5d8aa8;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>


<button>Default Button</button>
<a href="#" class="but">Link Button</a>
<button class="but">Button</button>
<input type="button" class="but" value="Input Button">

css web button colors

Use the background-color property to change the background color of a button:

web button colors code


<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</style>



<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

css web button size

Use the font-size property to change the font size of a button:

web button size code


<style>
.bute {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.but1 {font-size: 10px;}
.but2 {font-size: 12px;}
.but3 {font-size: 16px;}
.but4 {font-size: 20px;}
.but5 {font-size: 24px;}
</style>


<button class="bute but1">10px</button>
<button class="bute but2">12px</button>
<button class="bute but3">16px</button>
<button class="bute but4">20px</button>
<button class="bute but5">24px</button>

css web button padding

Use the padding property to change the padding of a button:

web button padding code


<style>
.buta {
  background-color: #4F6AD7;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buta1 {padding: 10px 24px;}
.buta2 {padding: 12px 28px;}
.buta3 {padding: 14px 40px;}
.buta4 {padding: 32px 16px;}
.buta5 {padding: 16px;}
</style>


<button class="buta buta1">10px 24px</button>
<button class="buta buta2">12px 28px</button>
<button class="buta buta3">14px 40px</button>
<button class="buta buta4">32px 16px</button>
<button class="buta buta5">16px</button>

css web button rounded

Use the border-radius property to add rounded corners to a button:

web button rounded code


<style>
.buty {
  background-color: #313131;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buty1 {border-radius: 2px; background-color: #008CBA;}
.buty2 {border-radius: 4px; background-color: #f44336;}
.buty3 {border-radius: 8px; background-color: #e7e7e7; color:#000;}
.buty4 {border-radius: 12px; background-color: #555555;}
.buty5 {border-radius: 50%; background-color: orange; color:#000;}
</style>


<button class="buty buty1">2px</button>
<button class="buty buty2">4px</button>
<button class="buty buty3">8px</button>
<button class="buty buty4">12px</button>
<button class="buty buty5">50%</button>

css web button colored

Use the border property to add a colored border to a button:

web button colored code


<style>
.buto {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buto1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.buto2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.buto3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.buto4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.buto5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>


<button class="buto buto1">Green</button>
<button class="buto buto2">Blue</button>
<button class="buto buto3">Red</button>
<button class="buto buto4">Gray</button>
<button class="buto buto5">Black</button>

css web button hoverable

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

web button hoverable code


<style>
.butl {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.butl1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.butl1:hover {
  background-color: #4CAF50;
  color: white;
}

.butl2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.butl2:hover {
  background-color: #008CBA;
  color: white;
}

.butl3 {
  background-color: #fff; 
  color: #000; 
  border: 2px solid #f44336;
}

.butl3:hover {
  background-color: #f44336;
  color: #fff;
}

.butl4 {
  background-color: white;
  color: black;
  border: 2px solid yellow;
}

.butl4:hover {background-color: yellow;
color: red;}

.butl5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.butl5:hover {
  background-color: #555555;
  color: white;
}

.butl6 {
  background-color: #4CAF50; 
  color: #fff; 
  border: 2px solid #4CAF50;
}

.butl6:hover {
  background-color: #fff;
  color: #000;
}

.butl7 {
  background-color: #008CBA; 
  color: #fff; 
  border: 2px solid #008CBA;
}

.butl7:hover {
  background-color: #fff;
  color: #000;
}

.butl8 {
  background-color: #f44336; 
  color: #fff; 
  border: 2px solid #f44336;
}

.butl8:hover {
  background-color: #fff;
  color: #000;
}

.butl9 {
  background-color: yellow;
  color: black;
  border: 2px solid yellow;
}

.butl9:hover {background-color: #fff;
color: red;}

.butl10 {
  background-color: #555555;
  color: #fff;
  border: 2px solid #555555;
}

.butl10:hover {
  background-color: #fff;
  color: #000;
}
</style>

<button class="butl butl6">Green</button>
<button class="butl butl7">Blue</button>
<button class="butl butl8">Red</button>
<button class="butl butl9">Yellow</button>
<button class="butl butl10">Black</button>
<button class="butl butl1">Green</button>
<button class="butl butl2">Blue</button>
<button class="butl butl3">Red</button>
<button class="butl butl4">Yellow</button>
<button class="butl butl5">Black</button>

css web buttons shadow

Use the box-shadow property to add shadows to a button:

web buttons shadow code


<style>
.butl {
  background-color: #57B8DC;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.butl1 {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.255),0 17px 50px 0 rgba(250, 140, 79);
}

.butl2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.255),0 17px 50px 0 rgba(181, 195, 6);
}
</style>


<button class="butl butl1">Shadow Button</button>
<button class="butl butl2">Shadow on Hover</button>

css web buttons disabled

Use the opacity property to add transparency to a button (creates a "disabled" look).

Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:

web buttons disabled code


<style>
.butm {
  background-color: #A2242F;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>


<button class="butm">Normal Button</button>
<button class="butm disabled">Disabled Button</button>

css web buttons width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

web buttons width code


<style>
.buts {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buts1 {width: 250px; background-color: #4CAF50;}
.buts2 {width: 50%; background-color: #008CBA;}
.buts3 {width: 100%; background-color: #f44336;}
</style>


<button class="buts buts1">250px</button>
<button class="buts buts2">50%</button>
<button class="buts buts3">100%</button>

css web buttons groups

Remove margins and add float:left to each button to create a button group:

web buttons groups code


<style>
.btn-group .butd {
  background-color: #734A33;
border: 0px solid #9F8170;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .butd:hover {
  background-color: #BEB4AB;
}
</style>


<div class="btn-group">
  <button class="butd">Button</button>
  <button class="butd">Button</button>
  <button class="butd">Button</button>
  <button class="butd">Button</button>
</div>

css web bordered buttons groups

Use the border property to create a bordered button group:

web bordered buttons groups code


<style>
.btn-group1 .butr {
  background-color: #734A33;
border: 1px solid #9F8170;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group1 .butr:hover {
  background-color: #BEB4AB;
}
</style>


<div class="btn-group1">
  <button class="butr">Button</button>
  <button class="butr">Button</button>
  <button class="butr">Button</button>
  <button class="butr">Button</button>
</div>

css web vertical buttons groups

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

web vertical buttons groups code


<style>
.btn-group2 .butb {
  background-color: #2243B6;
  border: 1px solid #fff;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group2 .butb:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

.btn-group2 .butb:hover {
  background-color: #1560BD;
}
</style>


<div class="btn-group2">
  <button class="butb">Button</button>
  <button class="butb">Button</button>
  <button class="butb">Button</button>
  <button class="butb">Button</button>
</div>

css web buttons on image

Add a button to an image:

web buttons on image code


<style>
.let {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.let img {
  width: 100%;
  height: auto;
}

.let .btn3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #CD5700;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.let .btn3:hover {
  background-color: black;
  color: white;
}
</style>


<div class="let">
  <img src="images/test1.jpeg" alt="test1" style="width:100%">
  <button class="btn3">Button</button>
</div>

css web animated buttons

Add an arrow on hover:

web animated buttons code


<style>
.butf {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.butf span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.butf span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.butf:hover span {
  padding-right: 25px;
}

.butf:hover span:after {
  opacity: 1;
  right: 0;
}
</style>


<button class="butf" style="vertical-align:middle"><span>Hover </span></button>

css web pressed effect buttons

Add a "pressed" effect on click:

web pressed effect buttons code


<style>
.butsd {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #FF0000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.butsd:hover {background-color: #CE4676}

.butsd:active {
  background-color: #1D5DEC;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<button class="butsd">Click Me</button>

css web fading buttons

Fade in on hover:

web fading buttons code


<style>
.butj {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.butj:hover {opacity: 1}
</style>


<button class="butj">Hover Over Me</button>

css web ripple effect buttons

Add a "ripple" effect on click:

web ripple effect buttons code



<style>
.butx {
  position: relative;
  background-color: red;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.butx:after {
  content: "";
  background: #00BFFF;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.butx:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>


<button class="butx">Click Me</button>

All Basic HTML5

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

All Basic CSS3

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

js JAVASCRIPT

Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

CREATIONS

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.

NAVIGATION Bar

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

WEB BUTTONS

Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.