Buttons

Buttons with special styles

arrow_back
arrow_forward
arrow_upward
SPR
REF
<div class="btnBase_1">
<button class="btn_1">Class btnBase_1 (underlay) + btn_1</button>
<style>
.btnBase_1 {
background-color:tan;
border: 1px solid black;
border-radius:8px;
width:80%;
padding: 11px 27px;
text-align: center;
font-size:1rem;
padding:12px;}
.btn_1 {
background-color: whitesmoke;
border: 1px solid black;
border-radius:4px;
color: black;
padding: 11px 27px;
text-align: center;
font-size:1rem;}
</style>
</div>

<button class="btn_2">Button with btn_2 styling</button>
<style>
.btn_2{
background-color:azure;
border: 1px solid silver;
border-radius: 9px; color: black;
padding: 15px 32px; text-align: center;
font-size: 16px; margin: 4px 2px;}

.btn_2:hover:enabled
{border: 1px solid royalblue;}
</style>
<style>
.btn_5 {position: relative;}
.btn_5:before {
content: " ";
position: absolute; z-index: -1;
top: 2px; left: 2px; right: 2px; bottom: 2px;
border: 2px solid black; border-radius:6px;}
.btn_5 {
border-radius:7px; border: 3px solid red;
padding: 5px;
background-clip: content-box; /* support: IE9+ */
background-color:whitesmoke;
padding: 11px 27px;
text-align: center; font-size:1rem;}
</style>

<button class="btn_5">Button with btn_5 styling</button>
Put in Div to avoid color under on mousrover

<a href="Slider.asp">
<div>
<img src="../../../images/Log/010.gif" style="padding:12px" title="No hover color under"/>
</div>