We can apply special effects on buttons by applying various CSS styles. Now Create a Web page named Button.html to apply CSS style on buttons.
<!doctype html>
<head>
<title>Apply CSS style on buttons</title>
<style type="text/css">
#round{
border-radius:60px;
background:lime;
height:80px;
width:80px;
}
#square{
background:aqua;
didplay:block;
float:left;
font:normal 12px Arial;
line-height:15px;
height:23px;
padding-left:9px;
text-decoration:none;
width:100px;
}
#oval{
background:gray;
color:white;
display:block;
float:left;
font:normal 13px Tahoma;
line-height:24px;
padding-left:11px;
text-decoration:none;
width:100px;
border-radius:60px;
}
#bold{
padding:5px 7px;
border:1px solid #778;
color:white;
border:1px solid gray;
background:green;
border-radius:8px;
box-shadow:3px 3px 4px rgba(0, 0, 0, .5);
-webkit-box-shadow:3px 3px 4px rgba(0, 0, 0, .5);
background:-webkit-gradient(linear, center top, center bottom, from(#04ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4));
width:100px;
}
</style>
</head>
<body>
<h1>Applying CSS on Buttons</h1>
<h3>Round shaped Buttons</h3>
<BUTTON id="round">button 1</BUTTON>
<BUTTON id="round">button 2</BUTTON>
<br><hr>
<h3>Square Shaped button</h3>
<BUTTON id="square">button 1</BUTTON>
<BUTTON id="square">button 2</BUTTON>
<br>
<hr>
<h3>Oval shaped button</h3>
<BUTTON id="oval">button 1</BUTTON>
<BUTTON id="oval">button 2</BUTTON>
<br>
<hr>
<h3>Gradient buttons</h3>
<BUTTON id="bold">button 1</BUTTON>
<BUTTON id="bold">button 2</BUTTON>
</body>
</html>
We have applied different CSS styles on buttons. The output of the above Web page is:
<!doctype html>
<head>
<title>Apply CSS style on buttons</title>
<style type="text/css">
#round{
border-radius:60px;
background:lime;
height:80px;
width:80px;
}
#square{
background:aqua;
didplay:block;
float:left;
font:normal 12px Arial;
line-height:15px;
height:23px;
padding-left:9px;
text-decoration:none;
width:100px;
}
#oval{
background:gray;
color:white;
display:block;
float:left;
font:normal 13px Tahoma;
line-height:24px;
padding-left:11px;
text-decoration:none;
width:100px;
border-radius:60px;
}
#bold{
padding:5px 7px;
border:1px solid #778;
color:white;
border:1px solid gray;
background:green;
border-radius:8px;
box-shadow:3px 3px 4px rgba(0, 0, 0, .5);
-webkit-box-shadow:3px 3px 4px rgba(0, 0, 0, .5);
background:-webkit-gradient(linear, center top, center bottom, from(#04ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4));
width:100px;
}
</style>
</head>
<body>
<h1>Applying CSS on Buttons</h1>
<h3>Round shaped Buttons</h3>
<BUTTON id="round">button 1</BUTTON>
<BUTTON id="round">button 2</BUTTON>
<br><hr>
<h3>Square Shaped button</h3>
<BUTTON id="square">button 1</BUTTON>
<BUTTON id="square">button 2</BUTTON>
<br>
<hr>
<h3>Oval shaped button</h3>
<BUTTON id="oval">button 1</BUTTON>
<BUTTON id="oval">button 2</BUTTON>
<br>
<hr>
<h3>Gradient buttons</h3>
<BUTTON id="bold">button 1</BUTTON>
<BUTTON id="bold">button 2</BUTTON>
</body>
</html>
We have applied different CSS styles on buttons. The output of the above Web page is:
No comments:
Post a Comment