HTML5 CSS Google的卷軸樣式

CSS Google的卷軸與按鈕樣式

tags: 部落格文章

紀錄一下樣式，我是從google的網頁裡面複製出來的，現在比較主流好看的蠻多長這個樣子的，用這個當基底去調整就好。

參考的是肺炎的感染人數的頁面
https://news.google.com/covid19/map?hl=zh-TW&mid=%2Fm%2F03_3d&gl=TW&ceid=TW%3Azh-Hant

卷軸

/* Scrollbar のデザイン */
 ::-webkit-scrollbar {
    background: transparent;
    height: 16px
}

 ::-webkit-scrollbar-thumb {
    background: rgba(128, 134, 139, 0.2);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 10px;
    box-sizing: border-box
}

 ::-webkit-scrollbar:hover {
    background: rgba(128, 134, 139, 0.102);
    border-radius: 16px;
    height: 16px
}

 ::-webkit-scrollbar-track:hover {
    background: transparent
}

 ::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 134, 139, 0.4);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 16px;
    box-sizing: border-box;
    cursor: pointer
}

 ::-webkit-scrollbar-corner {
    background: transparent
}

按鈕

自己修了幾版的樣式，這邊貼我最後選的簡化版本，剩下測試的可以參考這，
https://github.com/hunandy14/CSS_BottomStyle

/* ボタンのデザイン */
input[type="button"] {
    color: #3c4043;
    border: solid 1px #dadce0;
    -webkit-box-shadow: none;
    box-shadow: none;
    /*     height: 1px; */
    /*     min-height: 2rem; */
    min-width: 2rem;
    /*     padding-left: 9px; */
    /*     padding-right: 9px; */
    -webkit-border-radius: 0.1rem;
    border-radius: 0.1rem;
    font-family: 'Google Sans', sans-serif;
    color: inherit;
    /*     font-size: 0.875rem; */
    background: transparent;
    transition: box-shadow 0.25s ease-in-out;
}

input[type="button"]:active {
    -webkit-box-shadow: 0 1px 4px rgba(189, 193, 198, 1);
    box-shadow: 0 1px 4px rgba(189, 193, 198, 1);
    border: solid 1px rgba(120, 120, 120, 0.6);
    background: rgba(60, 64, 67, 0.039);
}

input[type="button"]:hover {
    background: rgba(60, 64, 67, 0.039);
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type="button"]:disabled,
input[type="button"][disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    color: #cccccc;
}

外框線

漂亮的外圍框線

.pym81b { 
  padding: 16px; 
  border: 1px solid #dadce0; 
  -webkit-border-radius: 8px; 
  border-radius: 8px; 
  margin-bottom: 32px; 
  background: #ffffff; 
}