My Blog

Buttons

—

by

Awais Farooq
in

Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them.

To create a CSS button, you will need to use the <button> element in HTML. You can then use CSS to style the button.

A basic HTML structure with button looks as in the following code:

<html><head></head><body><button class="style-button">Click Me</button></body></html>

Add styles using CSS to your button:

.style-button {
   background-color: pink;
   border: none;
   border-radius: 10px;
   padding: 15px;
   font-size: 16px;
   text-decoration: none;
   cursor: pointer;
}

CSS Buttons – Basic Example

Here is an example of how to use CSS to style buttons and links −

<html><head><style>
   .style-button {
      background-color: pink;
      border: none;
      padding: 10px;
      margin: 5px;
      font-size: 12px;
      text-decoration: none;
   }
</style></head><body><button>Basic CSS Button</button><button class="style-button">CSS Styled Button</button><a href="#" class="style-button">CSS Link Button</a><input type="button" class="style-button" value="CSS Input Button"></body></html>

CSS Buttons Colors

Here is an example of how to use CSS to style buttons with different colors −

<html><head><style>
   .style-button {
      display: inline-block;
      border: none;
      padding: 10px;
      margin: 5px;
      font-size: 12px;
      text-decoration: none;
   }
   .color-pink {
      background-color:pink;
   }
   .color-green {
      background-color: greenyellow;
   }
   .color-violet {
      background-color: violet;
   }
   .color-blue {
      background-color: skyblue;
   }
   .color-yellow {
      background-color: yellow;
   }
</style></head><body><button class="style-button color-pink">Pink Button</button><button class="style-button color-green">Green Button</button><button class="style-button color-violet">Violet Button</button><button class="style-button color-blue">Blue Button</button><button class="style-button color-yellow">Yellow Button</button></body></html>

CSS Buttons Sizes

Here is an example of how to use CSS to style buttons with different font sizes −

<html><head><style>
   .style-button {
      display: inline-block;
      border: none;
      padding: 10px;
      margin: 5px;
      text-decoration: none;
      background-color: violet;
   }
   .size1 {
      font-size: 10px;
   }
   .size2 {
      font-size: 15px;
   }
   .size3 {
      font-size: 20px;
   }
   .size4 {
      font-size: 25px;
   }
   .size5 {
      font-size: 30px;
   }
</style></head><body><button class="style-button size1">Size 10px</button><button class="style-button size2">Size 15px</button><button class="style-button size3">Size 20px</button><button class="style-button size4">Size 25px</button><button class="style-button size5">Size 30px</button></body></html>

CSS Buttons Padding

Here is an example of how to add padding to buttons using padding property −

<html><head><style>
   .style-button {
      display: inline-block;
      border: none;
      font-size: 12px;
      margin: 5px;
      text-decoration: none;
   }
   .padding-style1 {
      padding: 5px 10px;
      background-color: violet;
   }
   .padding-style2 {
      padding: 10px;
      background-color: pink;
   }
   .padding-style3 {
      padding: 10px 20px 10px 20px;
      background-color: violet;
   }
   .padding-style4 {
      padding: 15px 30px;
      background-color: pink;
   }
   .padding-style5 {
      padding: 30px 15px;
      background-color: violet;
   }
</style></head><body><button class="style-button padding-style1">Padding 5px 10px</button><button class="style-button padding-style2">Padding 10px</button><button class="style-button padding-style3">Padding 10px 20px 10px 20px</button><button class="style-button padding-style4">Padding 15px 30px</button><button class="style-button padding-style5">Padding 30px 15px</button></body></html>

CSS Rounded Buttons

Here is an example of how to create rounded corner buttons using the border-radius CSS property −

<html><head><style>
   .style-button {
      display: inline-block;
      border: none;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
   }
   .border-style1 {
      border-radius: 10px;
      background-color: violet;
   }
   .border-style2 {
      border-radius: 20px;
      background-color: pink;
   }
   .border-style3 {
      border-radius: 50%;
      background-color: violet;
   }
</style></head><body><button class="style-button border-style1">border-radius: 10px</button><button class="style-button border-style2">border-radius: 20px</button><button class="style-button border-style3">circle</button></body></html>

CSS Colored Button Border

Here is an example of how to create buttons with different border colors using border property −

<html><head><style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
      background-color: white; 
   }
   .border-style1 {
      border: 3px solid red;
   }
   .border-style2 {
      border: 3px solid yellow;
   }
   .border-style3 {
      border: 3px solid green;
   }
   .border-style4 {
      border: 3px solid pink;
   }
</style></head><body><button class="style-button border-style1">Red Border</button><button class="style-button border-style2">Yellow Border</button><button class="style-button border-style3">Green Border</button><button class="style-button border-style4">Pink Border</button></body></html>

CSS Hoverable Buttons

Here is an example of how to create hoverable buttons using :hover pseudo-class −

<html><head><style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
   }
   .hover-style1 {
      background-color: pink;
      border: none;
   }
   .hover-style2 {
      border: 3px solid yellow;
      background-color: white; 
   }
   .hover-style1:hover {
      border: 3px solid pink;
      background-color: white; 
   }
   .hover-style2:hover {
      background-color: yellow;
   }
</style></head><body><button class="style-button hover-style1">Hover Button</button><button class="style-button hover-style2">Hover Button</button></body></html>

CSS Shadow Buttons

Here is an example of how to create buttons with drop shadows using box-shadow property −

<html><head><style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 10px;
      border: none;
   }
   .shadow-style1 {
      background-color: pink;
      box-shadow: 0 5px 10px 0 red; 
   }
   .shadow-style2 {
      background-color: yellow;
   }
   .shadow-style2:hover {
      background-color: yellow;
      box-shadow: 0 5px 10px 0 orange;
   }
</style></head><body><button class="style-button shadow-style1">Shadow Button</button><button class="style-button shadow-style2">Hover Shadow Button</button></body></html>

CSS Disabled Buttons

Here is an example of how to create a disabled button by setting the cursor to not-allowed −

<html><head><style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
      border: none;
      background-color: pink;
   }
   .normal-button {
      cursor: pointer;
   }
   .disable-button {
      opacity: 0.5;
      cursor: not-allowed;
   }
</style></head><body><button class="style-button normal-button">Click Me</button><button class="style-button disable-button disabled">Disable Button</button></body></html>

CSS Buttons Width

Here is an example of how to create buttons with different widths −

<html><head><style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      border: none;
      margin: 5px;
   }
   .button-width-px {
      background-color: pink;
      width: 200px;
   }
   .half-width-button {
      background-color: violet;
      width: 50%;
   }
   .full-width-button {
      background-color: yellow;
      width: 100%;
   }
</style></head><body><button class="style-button button-width-px">Width: 200px</button><br><button class="style-button half-width-button">Half Width Button</button><button class="style-button full-width-button">Full Width Button</button></body></html>

CSS Buttons Groups

Here is an example of how to create a horizontal button group by removing the margins and adding the float: left property to each button −

<html><head><style>
   .button-group {
      display: flex; 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: none;
      padding: 10px 20px;
      float: left;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
   }
   .style-button:hover {
      background-color: orange;
   }
</style></head><body><div class="button-group"><button class="style-button">Submit</button><button class="style-button">Cancel</button><button class="style-button">Reset</button></div></body></html>

CSS Border Buttons Groups

Here is an example of how to create a border button group by using border property −

<html><head><style>
   .button-group {
      display: flex; 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: 2px solid orange;
      padding: 10px 20px;
      float: left;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
   }
   .style-button:hover {
      background-color: violet;
   }
</style></head><body><div class="button-group"><button class="style-button">Submit</button><button class="style-button">Cancel</button><button class="style-button">Reset</button></div></body></html>

CSS Vertical Buttons Groups

Here is an example of how to create a vertical button group by seeting display: block and float: left property −

<html><head><style>
   .button-group { 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: 2px solid orange;
      padding: 10px 20px;
      text-align: center;
      display: block;
      text-decoration: none;
      font-size: 16px;
      width: 100px; 
   }
   .style-button:hover {
      background-color: violet;
   }
</style></head><body><div class="button-group"><button class="style-button">Home</button><button class="style-button">Blog</button><button class="style-button">Setting</button></div></body></html>

CSS Buttons on Image

Here is an example of how to overlay a button on top of an image using relative positioning −

<html><head><style>
   .image-container {
      position: relative;
      display: inline-block;
   }
   .image {
      width: 300px;
      height: 200px;
   }
   .button {
      position: absolute;
      top: 40%;
      left: 30%;
      background-color: yellow;
      border: none;
      padding: 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 15px; 
   }
   .button:hover {
      background-color: orange;
   }
</style></head><body><div class="image-container"><img class="image" src="images/tree.jpg" alt="Your Image"><button class="button" href="#">Click Me</button></div></body></html>

CSS Animated Buttons

Here is an example of how to create animated effect on a button −

<html><head><style>
   .arrow-button {
      display: inline-block;
      padding: 15px;
      background-color: violet;
      border: none;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
   }
   .arrow-button::before {
      content:"";
      position: absolute;
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      background-color: pink;
      transition: width 0.3s ease-in-out;
   }
   .arrow-button:hover::before {
      width: 100%;
   }
   .arrow-icon::after {
      content: '\2192'; 
      margin-left: 10px;
   }
</style></head><body><button class="arrow-button" href="#">Hover Me<span class="arrow-icon"></span></button></body></html>

CSS Button Press Effect

Here is an example of how to add a pressed effect to the button when it is clicked −

<html><head><style>
   .style-button {
      display: inline-block;
      padding: 15px;
      background-color: pink;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
   }
   .style-button:hover {
      background-color: violet;
   }
   .style-button:active {
      transform: translateY(2px);
      background-color: yellow;
   }
</style></head><body><button class="style-button">Press Me</button></body></html>

CSS Button Fade In Effect

Here is an example of how to add a fade in effect to the button when it is hover −

<html><head><style>
   .style-button {
      display: inline-block;
      padding: 15px;
      background-color: violet;
      border: none;
      border-radius: 5px;
      cursor: pointer;
   }
   .style-button:hover {
      opacity: 0.5;
   }
</style></head><body><button class="style-button">Hover Me</button></body></html>

CSS Button Ripple Effect

Here is an example of how to add a ripple effect to the button when it is clicked −

<html><head><style>
   .style-button {
      display: inline-block;
      padding: 15px;
      position: relative;
      background-color: violet;
      border: none;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
   }
   .style-button:after {
      content: "";
      background: pink;
      display: block;
      position: absolute;
      padding-top: 200%;
      padding-left: 250%;
      margin-left: -15px !important;
      margin-top: -100%;
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
   }
   .style-button:active:after {
      padding: 0;
      margin: 0;
      opacity: 1;
      transition: 0s;
   }
</style></head><body><button class="style-button">Click Me</button></body></html>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *