You can try to run the following code to vertically align the grid using the align-content property −ExampleLive Demo                    .container {             display: grid;             background-color: gray;             align-content: center;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

Align flex lines with CSS align-content property. You can try to run the following code to implement the align-content property. It adds space around the items:ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the align-items property with value flex-start to align flex items on the top.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

Use the justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-end;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz             Q1       Q2       Q3       Q4          

Use the justify-content property with value flex-start to align the flex-items at the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

You can try to run the following code to align the grid inside the container using the justify-content property:ExampleLive Demo                    .container {             display: grid;             background-color: gray;             grid-template-rows: 120px 90px 100px;             justify-content: space-evenly;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: yellow;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to create a responsive pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: blue;             float: left;             padding: 3px 8px;             text-decoration: none;          }                     Our Quizzes                          

You can try to run the following code to fade in on button hover with CSSExampleLive Demo                    .btn {             background-color: orange;             color: white;             padding: 10px;             text-align: center;             font-size: 16px;             margin: 5px;             opacity: 0.5;             transition: 0.5s;             display: inline-block;             text-decoration: none;             cursor: pointer;          }          .btn:hover {             opacity: 2          }                     Result    

To set the button width, use the CSS width property.ExampleYou can try to run the following code to set the width of a button −Live Demo                    .btn {             background-color: yellow;             color: black;             width: 120px;             text-align: center;             font-size: 15px;             padding: 20px;             border-radius: 15px;             border: 3px dashed blue;          }                     Result       Click below for result:       Result    

In order to allow users to interact with a website or application, buttons are an essential component of web design. The user experience can be greatly improved and interactions made more interesting by adding a visually beautiful and innovative click effect to button using CSS. The active pseudo-class can be used to create a pressed effect on a button click using CSS. This style provides visual feedback by defining how the button will look when it is clicked. Before knowing more about it, let’s have a quick view about button in HTML. HTML button In HTML, the clickable button ... Read More