CSS Articles - Page 90 of 130

To create a disabled button look, use the CSS opacity property.ExampleYou can try to run the following code to create a disabled look of a button −Live Demo                    .btn1 {             color: black;             text-align: center;             font-size: 15px;          }          .btn2 {             color: black;             text-align: center;             font-size: 15px;             opacity: 0.5;          }                     Result       Click below for result:       Enabled       Disabled    

You can try to run the following code to create a vertical button groupExampleLive Demo                    .mybtn .button {             background-color: orange;             border: 1px solid green;             width: 120px;             color: white;             font-size: 14px;             padding: 10px;             text-align: center;             text-decoration: none;             display: block;          }                              Result          Result          Result          Result          

To set the color between columns, use the column-rule-color property. You can try to run the following code to implement the column-rule-color property.With that, we will also set the style of the column rule:ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule-color: orange;             column-rule-style: dashed;          }                              This ... Read More

The shorthand property for column rule is column-rule property. You can try to run the following code to implement the column-rule propertyExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule: 2px dotted orange;          }                              This is demo text. This is demo text. This is demo text.          This ... Read More

To fill columns, use the column-fill property. You can try to run the following code to implement the column-fill property, with balance form:ExampleLive Demo                    .demo {             column-count: 4;             column-fill: balance;          }                              This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is ... Read More

To specify the number of columns an element should be divided into, use the column-count property.You can try to run the following code to implement the column-count property with 4 columnsExampleLive Demo                    .demo {             column-count: 4;          }                              This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is ... Read More

You can try to run the following code to center pagination on a web page:ExampleLive Demo                    .demo {             display: inline-block;          }          .demo1 {             text-align: center;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             transition: background-color 2s;             border: 1px solid orange;             font-size: 18px;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }          .demo a:first-child {             border-top-left-radius: 10px;             border-bottom-left-radius: 10px;          }          .demo a:last-child {             border-top-right-radius: 10px;             border-bottom-right-radius: 10px;          }                     Our Quizzes                                                

The space as shown in the following figure, between rows and columns are called Grid Gaps

The horizontal line in the following is called Grid Rows.

To change the pagination size, use the font-size property. You can try to run the following code to increase the size of pagination:ExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             transition: background-color 2s;             border: 1px solid orange;             font-size: 18px;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }          .demo a:first-child {             border-top-left-radius: 10px;             border-bottom-left-radius: 10px;          }          .demo a:last-child {             border-top-right-radius: 10px;             border-bottom-right-radius: 10px;          }                     Our Quizzes