CSS Controls

« Previous Tutorial CSS3 Tutorial »

CSS provides you the functionality to customize controls on a Web page by modifying their appearance. For instance, you can change the shapes of the buttons and the color of the scroll bars.

CSS Controls Example

Now take a look at some of the examples of CSS Controls.

CSS Code to Change the Appearance of Button Control

The following is an example of using the CSS code to change the appearance of the button control:

   <title>CSS Controls Example</title>
      #button { border-radius:25px; background-color:black;
         color:white; height:55px; width:55px; }

<button id="button">Button 1</button>


Here is the sample output of the above CSS change the appearance of button control example code:

css controls

In the preceding example, we have used the BUTTON element to display a button control on the Web page. We have also specified the border-radius, background-color, height, and width properties of CSS to change the appearance of the button control.

CSS Code to Change the Appearance of Menus by Applying Mouse Effects

We can also change the appearance of menus by applying the effects on mouse events, such as mouseover and mouseout.

The following code snippet shows the CSS code for changing the appearance of menus:

.vmenu li:hover { background-color:white;
   color:black; border-bottom:1px solid black; }

In the preceding code snippet, we have used the background-color, color, and border-bottom properties to change the background color, text color, and borders of menus.

CSS Code to Change the Appearance of Scroll Bars

Moreover, the appearance of scroll bars of a Web browser can also be changed using the CSS properties.

The following examples shows the CSS code that you can use to change the appearance of the scroll bars :

<style type="text/css">
   html, body { scrollbar-face-color:blue;
      scrollbar-size:10px; }

In the preceding example, we have specified the color, shadow, color, and size of scroll bars.

CSS Online Test

« Previous Tutorial CSS3 Tutorial »

© Copyright 2021. All Rights Reserved.