header ads

Button For Website - Button HTML Code

Simple Buttons





CSS 
<style>
button{
border: none;
padding: 10px;
font-weight: bold;
background: #001f3f;
color: white;
}

a{
color: white;
text-decoration: none;
}
</style>

HTML
<button><a href="#">BUTTON</a></button>


Rounded Buttons




CSS
<style>
ton{
butborder: none;
padding: 10px;
font-weight: bold;
background: #001f3f;
color: white;
}

a{
color: white;
text-decoration: none;
}
</style>

HTML
<button><a href="#">BUTTON</a></button>



Hoverable Colored Border Buttons



CSS
<style>
  button{
border: none;
padding: 10px;
font-weight: bold;
background: transparent;
color: white;
}

.btnrounded {
border-radius: 4px;
}

a{
color: white;
text-decoration: none;
}
.redbtn{
border: 1px solid #FF4136;
}
.txt1{
color: #001f3f;
}
.redbtn:hover{
background: #FF4136;
}
.txt2:hover{
color: #fff;
}
</style>

HTML
<button class="btnroundedborder redbtn"><a class="txt1" href="#">BUTTON</a></button>

Shadow Buttons




CSS
<style>
  .btns{
    border: none;
    padding: 10px;
    font-weight: bold;
    color: white;
    border-radius: 2px;
    display: inline-block;
    margin: 1rem;
    position: relative;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

a{
text-decoration: none;
color: white;
}

.redclrbtn{
background: #FF4136;
}
</style>

HTML
<button class="redclrbtn btns"><a href="">BUTTON</a></button>



Round/Circle Buttons





CSS
<style>
  .btnc{
    border: none;
    border-radius: 50%;
    padding: 10px;
    font-weight: bold;
    color: white;
    height: 70px;
    width: 70px;
    display: inline-block;
    margin: 1rem;
    position: relative;
    text-align: center;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

a{
text-decoration: none;
color: white;
}

.navyclrbtn{
background: #001f3f;
}

.redclrbtn{
background: #FF4136;
}

.blueclrbtn{
background: #0074D9;
}

.greenclrbtn{
background: #2ECC40;
}

.orangeclrbtn{
background: #FF851B;
}

.fuchsiaclrbtn{
background: #F012BE;
}
</style>

HTML
<button class="redclrbtn btnc"><a href="">BUTTON</a></button>

Post a Comment

0 Comments