CSS tlačítka-2
Kód:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* CSS */
.button {
background-image: linear-gradient(#f7f8fa ,#e7e9ec);
border-color: #adb1b8 #a2a6ac #8d9096;
border-style: solid;
border-width: 1px;
border-radius: 3px;
box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
box-sizing: border-box;
color: #0f1111;
cursor: pointer;
display: inline-block;
font-family: "Amazon Ember",Arial,sans-serif;
font-size: 14px;
height: 29px;
outline: 0;
overflow: hidden;
padding: 0 11px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
}
.amazontlacitko{
display: inline-block;
text-decoration: none;
border-radius: 3px;
font-size: 14px;
height: 29px;
padding: 0 11px;
font-family: "Amazon Ember",Arial,sans-serif;
border:1px solid #b79033;
background:linear-gradient( #fde7ae,#f3c451);
}
.button:active {
border-bottom-color: #a2a6ac;
}
.button:active:hover {
border-bottom-color: #a2a6ac;
}
.button:hover {
border-color: #a2a6ac #979aa1 #82858a;
}
.amazontlacitko:hover {
border-color: #a2a6ac #979aa1 #82858a;
}
.button-b:focus {
border-color: #1a73e8;
box-shadow: rgba(26, 115, 232, .5) 0 0 3px 2px;
outline: 0;
}
.amazontlacitko:focus {
border-color: #1a73e8;
box-shadow: rgba(26, 115, 232, .5) 0 0 3px 2px;
outline: 0;
}
.amazontlacitko2 {
background-color: #fff;
border: 1px solid #d5d9d9;
border-radius: 5px;
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
box-sizing: border-box;
color: #0f1111;
cursor: pointer;
display: inline-block;
font-family: "Amazon Ember",sans-serif;
font-size: 14px;
height: 29px;
padding: 0 10px 0 11px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
}
.amazontlacitko2:hover {
background-color: #f7fafa;
}
.amazontlacitko2:focus {
border-color: #008296;
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
outline: 0;
}
</style>
<!-- HTML !-->
<a href='#no'><button class="amazontlacitko">Tlačítko 1 <i class="fa fa-amazon"></i></button></a>
<a href='#no'><button class="button"><i class="fa fa-amazon" style="color:red"></i> Tlačítko 2</button></a>
<a href="#no"><button class="button"><i class="fa fa-amazon"></i> Tlačítko 3</button></a>
<a href="#no"><button class="amazontlacitko2"><i class="fa fa-amazon"></i> Tlačítko 4</button></a>
Kód:
<style>
/* CSS */
.tlacitko3 {
background-color: #f8f9fa;
border: 1px solid #eee;
border-radius: 4px;
color: #3c4043;
cursor: pointer;
font-family: arial,sans-serif;
font-size: 14px;
height: 36px;
line-height: 27px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.tlacitko4 {
background-color: #0276FF;
border: 1px solid #0276FF;
border-radius: 4px;
color: #3c4043;
cursor: pointer;
font-family: arial,sans-serif;
font-size: 14px;
color: white;
height: 36px;
line-height: 27px;
min-width: 54px;
padding: 0 16px;
text-align: center;
transition: 0.2s;
}
.tlacitko3:hover {
border-color: #dadce0;
box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
color: #202124;
}
.tlacitko4:hover {
border-color: #dadce0;
box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
color: #202124;
background-color: #f8f9fa;
}
.tlacitko3:focus {
border-color: #4285f4;
outline: none;
}
.tlacitko4:focus {
border-color: #4285f4;
color: #202124;
background-color: #f8f9fa;
outline: none;
</style>
<!-- HTML !-->
<a href="#no"><button class="tlacitko3">Tlačítko 1</button></a>
<a href="#no"><button class="tlacitko4">Tlačítko 2</button></a>