HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

CSS User Interface

CSS User Interface (UI) properties allow you to style various aspects of user interface elements such as buttons, inputs, checkboxes, radio buttons, etc.

Here are some commonly used CSS UI properties:

  • border: Specifies the border of an element.
  • border-radius: Specifies the radius of the element's corners.
  • box-shadow: Adds shadow effects around an element's frame.
  • cursor: Specifies the type of cursor to be displayed when pointing over an element.
  • outline: Sets the outline around an element.
  • resize: Specifies whether an element is resizable by the user.
  • text-align: Specifies the horizontal alignment of text content.
  • text-decoration: Sets the decoration of text content (underline, overline, line-through, etc.).
  • text-transform: Transforms the case of text content (uppercase, lowercase, capitalize, etc.).
  • transition: Defines transition effects for element state changes (e.g., hover, focus).

Here's an example of how you can use some of these properties to style a button:

Example

/* Style for button */
.button {
  background-color: #007bff;/* Blue background */
  color: #fff; /* White text color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  padding: 10px 20px; /* Padding */
  cursor: pointer; /* Pointer cursor */
  text-align: center; /* Center text */
  text-decoration: none; /* No underline */
  display: inline-block; /* Inline block display */
  transition: background-color 0.3s ease; /* Smooth color transition */
}

/* Hover state for button */
.button:hover {
  background-color: #0056b3; /* Darker blue background on hover */
}
You can click on above box to edit the code and run again.

Output