style button with css code example
Example 1: button style css
<div>
<style scoped="">
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
}
.button-error {
background: rgb(202, 60, 60);
}
.button-warning {
background: rgb(223, 117, 20);
}
.button-secondary {
background: rgb(66, 184, 221);
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>
Example 2: css button style rectangle
.placeholder-box {
position: relative;
display: block;
width: 300px;
min-height: 150px;
margin-top: 50px;
padding: 30px;
border: 1px solid #888;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
}
.placeholder-box p {
text-align: center;
margin: 0 0 15px;
}
.placeholder-box ul {
margin: 0;
}
/* Button */
button {
display: block;
border: solid white;
border-width: 0 10px;
border-radius: 0;
background: green;
color: white;
font-size: 18px;
margin: -60px auto 15px;
padding: 15px;
}
Example 3: button styling css
.button {
font-size: 16px;
letter-spacing: 2px;
font-weight: 400 !important;
background-color: #e63946ff;
color: #fff;
padding: 23px 50px;
margin: auto;
text-align: center;
display: inline-block !important;
text-decoration: none;
border: 0px;
width: max-content;
cursor: pointer;
transition: all 0.3s 0s ease-in-out;
}
.button:hover {
transform: scale(1.04, 1);
background-color: rgb(216, 10, 27);
text-decoration: none;
}
/* add extra functionality in button*/
/*button sizes*/
.btn_sm {
padding: 17px 40px !important;
}
.btn_md {
padding: 20px 50px !important;
}
.btn_lg {
padding: 23px 60px !important;
}
/*make your button block level*/
.btn_block {
width: 100% !important;
padding: 22px 30px !important;
}