css制作goole

CSS制作Google风格按钮

Google风格的按钮通常具有简洁、圆角和轻微的阴影效果。以下是一个实现Google风格按钮的CSS代码示例：

.google-btn {
  background-color: #4285F4;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.google-btn:hover {
  background-color: #3367D6;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}

.google-btn:active {
  background-color: #2E5DB6;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
}

Google搜索框样式

要创建类似Google主页的搜索框，可以使用以下CSS：

.search-container {
  width: 582px;
  margin: 0 auto;
  position: relative;
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.3s;
}

.search-input:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);
}

.search-input:focus {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);
}

Google Material Design卡片效果

Google的Material Design风格卡片可以使用以下CSS实现：

.material-card {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  padding: 24px;
  margin: 16px;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.material-card:hover {
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
}

Google配色方案

Google的标志性配色可以在CSS中这样定义：

:root {
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;
  --google-gray: #5F6368;
}

这些CSS片段可以帮助创建具有Google风格的用户界面元素。根据具体需求，可以调整颜色、尺寸和效果参数以达到最佳视觉效果。