First I will provide the code and then I will explain about the important things in the code.
buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<button id="buttonType">Button tag Button</button><br><br>
</div>
</body>
</html>
buttons.css
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:transparent;
color:#9037cf;
font-family:calibri;
font-size:20px;
border:1px solid #9037cf;
border-radius:10px;
-webkit-transition:background .3s,color .3s;
-moz-transition:background .3s,color .3s;
-ms-transition:background .3s,color .3s;
-0-transition:background .3s,color .3s;
transition:background .3s,color .3s;
}
#buttonType:hover{
cursor:pointer;
background:#9037cf;
color:#ffffff;
}
/*Button Type Button Styling End*/
output
I hope you can pretty much understand the above code. Let me explain about transition property.
transition is CSS3 property used to animate simple things. Here we have made different transition lines with different suffixes that is because for the cross browser compatibilities.
If any queries comment below. I will answer for each query.
buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<button id="buttonType">Button tag Button</button><br><br>
</div>
</body>
</html>
buttons.css
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:transparent;
color:#9037cf;
font-family:calibri;
font-size:20px;
border:1px solid #9037cf;
border-radius:10px;
-webkit-transition:background .3s,color .3s;
-moz-transition:background .3s,color .3s;
-ms-transition:background .3s,color .3s;
-0-transition:background .3s,color .3s;
transition:background .3s,color .3s;
}
#buttonType:hover{
cursor:pointer;
background:#9037cf;
color:#ffffff;
}
/*Button Type Button Styling End*/
output
transition is CSS3 property used to animate simple things. Here we have made different transition lines with different suffixes that is because for the cross browser compatibilities.
If any queries comment below. I will answer for each query.
No comments:
Post a Comment