Recent Posts

Sunday 17 May 2015

Buttons styling using CSS


In order to have good look for the website Cascading Style Sheets(CSS) plays very important role. Let us now discuss about the styling of the "buttons" using CSS.

First, create the html file and place the following code.
//index.html
<html><head><title>Styling buttons using CSS</title></head>
<link rel='stylesheet' href='style.css' type='text/css'/>
<body><!-- button -->
<button id='butn'>LetsScript</button>
</body>
</html>

Now its time for writing CSS and javascript . Assuming that you know the basics and syntax of CSS.

//place this code in style.css
#butn{
padding:10px 22px;background:#10c878;
margin:20px;color:#fff;font-weight:bold;letter-spacing:1px;
box-shadow:0px 1px 1px #10e878;border:1px solid #10d878;
cursor:pointer;font-family:arial;}
#butn:hover{ box-shadow:inset 0px 5px 14px #10a878; }

Smart Siva

Author & Editor

In Life every second is important, In programming every line of code is important.

0 comments:

Post a Comment

 
biz.