調べたこと 第二十二回

CSSの装飾
ーボタンー
 
HTML
<div class="inline">

<a href="#" class="pre">Sign In</a>

 
</div>
 
 
CSS 
.pre1 {
-webkit-transform: translateY(4px);->素を回転、拡大縮小、傾斜、移動する
transform: translateY(4px); ->要素を二次元平面上の垂直方向で再配置
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);->数値で透明度を指定
border-bottom: none;    ↓  ↘
}                   色を指定。 0〜1で透明度を表す。  

.pre1 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: linear-gradient(#678399 0%, #3d4e5b 100%);
  →二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}
 
今作っているCSSで、ボタンの作り方を調べて出てきた装飾の仕方です。
まだ良くわかっていませんが、とりあえず見たことがない関数を調べてみました。
中途半端に終っています。