how to style a button in css code example
Example 1: css button no style
button {
background: transparent;
box-shadow: 0px 0px 0px transparent;
border: 0px solid transparent;
text-shadow: 0px 0px 0px transparent;
}
button:hover {
background: transparent;
box-shadow: 0px 0px 0px transparent;
border: 0px solid transparent;
text-shadow: 0px 0px 0px transparent;
}
button:active {
outline: none;
border: none;
}
button:focus {
outline: 0;
}
Example 2: button css
<a href="#" class="myButton">green</a>
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
Example 3: 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 4: 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 5: button style css
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
Example 6: button style css
<div class="pure-button-group" role="group" aria-label="...">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>