CSS barvy Google
Barevná paleta
Barevnou paletu Zpráv Google tvoří patnáct základních barev. Na této stránce najdete přesné hodnoty pro těchto patnáct barev ve třech různých barevných prostorech.
Hexadecimální kód #174EA6
Hexadecimální kód #4285F4
Hexadecimální kód #D2E3FC
Hexadecimální kód #A50E0E
Hexadecimální kód #EA4335
Hexadecimální kód #FAD2CF
Hexadecimální kód #E37400
Hexadecimální kód #FBBC04
Hexadecimální kód #FEEFC3
Hexadecimální kód #0D652D
Hexadecimální kód #34A853
Hexadecimální kód #CEEAD6
Hexadecimální kód #202124
Hexadecimální kód #9AA0A6
Hexadecimální kód #F1F3F4
Google tlačítka
Kód:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<style>
/* The core button */
.google-button {
align-items: center;
border: none;
display: inline-flex;
justify-content: center;
outline: none;
position: relative;
z-index: 0;
-webkit-font-smoothing: antialiased;
font-size: .875rem;
letter-spacing: .25px;
background: none;
border-radius: 4px;
box-sizing: border-box;
color: #5f6368! important;
cursor: pointer;
font-weight: 500;
height: 36px;
min-width: 80px;
outline: none;
margin-left: 4px;
padding: 0 8px;
text-decoration: none;
white-space: pre-wrap;
text-align: center;
font-size: 16px! important;
font-family: Arial;
}
/* ::before, which will become the hover effect */
.google-button::before {
content: '';
display: block;
opacity: 0;
position: absolute;
transition-duration: .15s;
transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
z-index: -1;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: #F1F3F4;
border-radius: 4px;
transform: scale(0);
transition-property: transform,opacity;
}
.google-button:hover::before {
opacity: 0.9;
transform: scale(1);
}
/* inspired by Google */
</style>
<h3>Google tlačítka</h3>
<button class="google-button"><span class="material-icons">
home</span> Tlačítko 1</button>
<button class="google-button"><span class="material-icons">
touch_app</span> Tlačítko 2</button>
<button class="google-button"><span class="material-icons">
commute</span> Tlačítko 1</button>
<button class="google-button"><span class="material-icons">
star</span> Tlačítko 2</button>