This article will show you how you can create stylish button using css in html web page or in your asp.net application.
Basic Button Styling
Button With Border
Basic Button Styling
<!DOCTYPE html>
<html>
<head>
<style>
/* Red Button*/
.buttonred {
background-color: #f44336;
}
/* Gray Button*/
.buttongray {
background-color: #e7e7e7;
color: black;
}
/* Green Button */
.buttongreen {
background-color: #4CAF50;
}
/* Black Button */
.buttonblack {
background-color: #555555;
}
/* Blue Button*/
.buttonblue {
background-color: #008CBA;
}
</style>
</head>
<body>
<button class="buttonred">Button Red</button>
<button class="buttongray">Button Gray</button>
<button class="buttongreen">Button Green</button>
<button class="buttonblack">Button Black</button>
<button class="buttonblue">Button Blue</button>
</body>
</html>
|
Button with Custom Size.
<!DOCTYPE html>
<html>
<head>
<style>
.buttonred {
background-color: #f44336;
padding: 15px 32px;
}
/* Red Button*/
.buttongray {
background-color: #e7e7e7;
color: black;
padding: 15px 32px;
}
/* Gray Button*/
.buttongreen {
background-color: #4CAF50;
padding: 15px 32px;
}
/* Green Button */
.buttonblack {
background-color: #555555;
padding: 15px 32px;
}
/* Black Button */
.buttonblue {
background-color: #008CBA;
padding: 15px 32px;
}
/* Blue Button*/
</style>
</head>
<body>
<button class="buttonred">Button Red</button>
<button class="buttongray">Button Gray</button>
<button class="buttongreen">Button Green</button>
<button class="buttonblack">Button Black</button>
<button class="buttonblue">Button Blue</button>
</body>
</html>
|
<!DOCTYPE html>
<html>
<head>
<style>
.buttonred {
background-color: white;
color: black;
border: 2px solid #f44336;
padding: 15px 20px;
}
/* Red Button*/
.buttongray {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
padding: 15px 20px;
}
/* Gray Button*/
.buttongreen {
background-color: white;
color: black;
border: 2px solid #4CAF50;
padding: 15px 20px;
}
/* Green Button */
.buttonblack {
background-color: white;
color: black;
border: 2px solid #555555;
padding: 15px 20px;
}
/* Black Button */
.buttonblue {
background-color: white;
color: black;
border: 2px solid #008CBA;
padding: 15px 20px;
}
/* Blue Button*/
</style>
</head>
<body>
<button class="buttonred">Button Red</button>
<button class="buttongray">Button Gray</button>
<button class="buttongreen">Button Green</button>
<button class="buttonblack">Button Black</button>
<button class="buttonblue">Button Blue</button>
</body>
</html>
|
About the Author
0 comments:
Please let me know your view