css Archives - ElseBazaar

Icons Audio & Video

Please Share On:

There are 58 free Audio & Video Font Awesome Icons. The table below shows the free font awesome Audio & Video icons:

You may be interested in the following topics:

Icons Arrows

Please Share On:

There are 113 free Font Awesome Arrow icons. The table below shows the free font awesome arrow icons:

You may interest in the following topics:

Icons Animals

Please Share On:

There are 16 free Font Awesome Animal icons. The table below shows the free font Awesome Animal icons:

You may be interested in the following topics:

Icons Alert

Please Share On:

There are 10 free Font Awesome Alert icons The table below shows the free font Awesome Alert icons:

You may be interested in the following topics:

Icons Accessibility

Please Share On:

There are 17 free Font Awesome Accessibility icons. The table below shows the free font Awesome Accessibility icons:

accessible-icon

You may be interested in the following topics:

CSS Button On Image

Please Share On:

Definition:

Here, I am going to show you how can you put buttons on the image?

First, get your image in a container, and second, add a button on that image.

The process is pretty simple, isn’t it? But, if you don’t know CSS much or you are a beginner, this blog would more helpful for you. I have included source code with output. You can also try yourself by pressing the “TRY IT YOURSELF” button.

Syntax:

.button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
         .container {
           position: relative;
           width: 100%;
           max-width: 600px;
          }
          
        .container img {
          width: 100%;
          height: auto;
          } 
          
        .container .button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: green;
          color: white;
          padding: 20px 20px;
          text-align: center;
          text-decoration: none;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          background-position: center;
          opacity: 0.6;
  	      transition: background 0.8s;         
         }    
          
         .button:hover {
          	opacity: 1;
          	background: green radial-gradient(circle, transparent 1%, green 1%) center/25000%;
          }
          
         .button:active{
            background-color: #ffffff;
  	        background-size: 100%;
            transition: background 0s;
          }
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button On Image</h2>
  
   <div class="container">
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Button On Image" style="width:100%">
    <button class="button">Button</button>
   </div>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Button Animation

Please Share On:

Definition:

You can animate your button using CSS property and give more stylish and elegant looks. Here are the list of CSS Button Animation property:

Hover
Click
Fade In and
Ripple

See each CSS Button animation with an example. Make sure you try yourself to understand clearly.

1. Hover

Definition:

When a user put cursor over a button, the button effect should change so that the user can see it clearly and knows that the cursor is over a button.

You can change button’s background color, size and text on hover effects.

Syntax:

.button:hover 
  {
  background-color: darkred;
  color:white;
  font-size: 20px;
  }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
          
         .button:hover {
          background-color: darkred;
          color:white;
          font-size: 20px;
		}
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Hover</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

try it yourself

2. Click

Definition:

Here, you can show a clickable effect while click on the button. See an example below of CSS button clickable effect.

Syntax:

.button:active {
   background-color: black;
   box-shadow: 0 4px #777;
   transform: translateY(8px);
   }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
          
        .button:hover {
          background-color: darkred;
          color:white;
          font-size: 20px;
		}
          
        .button:active {
           background-color: black;
           box-shadow: 0 4px #777;
           transform: translateY(8px);
        }
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Hover</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

try it yourself

3. Fade In

Definition:

Fade In effect depends on the opacity of the button. To change the button fade-in effect, use the opacity from 0.0(low opacity) to 1 (high opacity).

See an example below of the button, which has 0.6 opacity initially and changed into a high opacity on mouse hover to that button.

Syntax:

.button:hover {
    opacity: 1;
    }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
          opacity: 0.6;
		}
          
        .button:hover {
          background-color: darkred;
          color:white;
          opacity: 1;
		}
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Fade In</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output

try it yourself

4. Ripple

Definition:

You can also display a button that shows the ripple effect when clicked on it. To display a ripple effect on the button, use .button:active:after { } property.

Syntax:

.button:active {
      background-color: #ffffff;
      background-size: 100%;
      transition: background 0s;
          }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color: white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
          background-position: center;
          opacity: 0.6;
  		  transition: background 0.8s;
		}
          
         .button:hover {
          	opacity: 1;
          	background: green radial-gradient(circle, transparent 1%, green 1%) center/25000%;
          }
          
         .button:active{
           	background-color: #ffffff;
  			background-size: 100%;
            transition: background 0s;
          }
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button Ripple</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

It is not possible to show the ripple output effect on the screenshot, so please click on “TRY IT YOURSELF” to see the ripple output.

try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Button Groups

Please Share On:

Definition:

You can create horizontal and vertical button groups using CSS.

Horizontal Button Groups

To create a group of horizontal buttons, you have to remove margins and apply float: left;

Syntax:

.button { float: left;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          padding: 20px 20px;
          color:white;
		  text-align: center;
		  text-decoration: none;
          float: left;
		}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Horizontal Button Groups</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>

	</body>
</html>

Output:

try it yourself

Vertical Button Groups

For vertical button group, apply display: block; instead of float: left; to display a group of buttons vertically down.

Syntax:

.button { display: block; }

Source Code:

<!DOCTYPE html>
<html>
    <head>
        <style>
                    
        .button {
          background-color: green;
          padding: 20px 20px;
          color:white;
          text-align: center;
          text-decoration: none;
          display: block;
        }
           
        </style>
    </head>
     
    <body>
    <h2>CSS Vertical Button Groups</h2>
       
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>
 
    </body>
</html>

Output:

Try it yourself

Try it yourself by changing float:left; and display:block; to see the differences.

Donate to support writers.

You may be interested in the following topics:

CSS Disabled Button

Please Share On:

Definition:

You can make your html button not-clickable by using CSS properties. The CSS property that makes your button disable is “cursor: not-allowed;”. This property has disabled your button and shows no parking sign on mouse hover button.

To display the disabled button, it is a good practice to add transparency to a button.

Syntax:

.btn1 {cursor: not-allowed; opacity: 0.5;}
.btn2 {cursor: not-allowed; opacity: 0.5;}
.btn3 {cursor: not-allowed; opacity: 0.5;}
.btn4 {cursor: not-allowed; opacity: 0.5;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
        .btn1 {cursor: not-allowed; opacity: 0.5;}
        .btn2 {cursor: not-allowed; opacity: 0.5;}
        .btn3 {cursor: not-allowed; opacity: 0.5;}
        .btn4 {cursor: not-allowed; opacity: 0.5;}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Disable Buttons</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Button Shadows

Please Share On:

Definition:

You can show button shadows to make your button more attractive.

See an example below of CSS button shadows.

Syntax:

.btn1 {box-shadow: 4px 4px 4px 4px red;}
.btn2 {box-shadow: 5px 5px 0 0 blue;}
.btn3 {box-shadow: -5px 5px 0 0 blue;}
.btn4 {box-shadow: -5px -5px 0 0 blue;}
.btn5 {box-shadow: 5px -5px 0 0 blue}
.btn6 {box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
        .btn1 {box-shadow: 4px 4px 4px 4px red;}
        .btn2 {box-shadow: 5px 5px 0 0 blue;}
        .btn3 {box-shadow: -5px 5px 0 0 blue;}
        .btn4 {box-shadow: -5px -5px 0 0 blue;}
        .btn5 {box-shadow: 5px -5px 0 0 blue}
        .btn6 {box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button Shadows</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>
    <button class="button btn5">btn 5</button>
    <button class="button btn6">btn 6</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Definition:

Syntax:

Source Code:

Output:

Definition:

1. Hover

Definition:

Syntax:

Source Code:

Output:

2. Click

Definition:

Syntax:

Source Code:

Output:

3. Fade In

Definition:

Syntax:

Source Code:

Output

4. Ripple

Definition:

Syntax:

Source Code:

Output:

Definition:

Horizontal Button Groups

Syntax:

Source Code:

Output:

Vertical Button Groups

Syntax:

Source Code:

Output:

Definition:

Syntax:

Source Code:

Output:

Definition:

Syntax:

Source Code:

Output:

Copyright @2023. All Right Reserved.