前端学习css案例（2）-button阴影与改变颜色

一、hover和active

如果采用了在css类里面只是设定了名字为：

submit-button:hover 这个包含的内容里面就是单纯的包含了需要改变的颜色，【pseudo-class】其他的设定还延续submit-button里面的内容设定。

class后面跟着“ ：xx ”   like submit-button：hover/active

1.hover：是鼠标放在上面的设定

2.active：就是点击了一下以后设定
 

二、opacity 新参数

新的参数：opacity 不透明度，数值可以从0到1，1就是不改变，0.7一般差不多就是浅一点适合hover，0.5适合点击一下以后的行为动作

三、transition新参数

此时会遇到一个问题：hover和active都会变换的很突然，没有丝滑，是很突然的改变了颜色

解决方法：

在最开始submit-button里面的添加一个参数叫transition，有两个变量，第一个变量的内容就是需要变换的某个参数（本次采用的参数为opactiy），第二个变量的内容就是变换所需要的时间,一般采用0.15s会好一点；

tip：一个小麻烦：

如果hover和active里面的参数不是一致的，最好把transition放在对应的类别里面，但需要注意此时transition就是只作用在悬停上，如果你鼠标一旦离开了button这个渐变就停止了，为了保证其延续性最好放在submit-button本身这个类里面

四、阴影部分box-shadow

四个变量的分别含意：

第一个是水平位置，默认正数往右走

第二个是垂直位置，默认往下走

第三个是blur 虚化,10px;

第四个是颜色,一般阴影喜欢和原按钮颜色一致，采用rgba（a的含义是opacity），四个参数，第四个参数就是opacity  本次采用了(0,0,0,0.15)

以下为hex转为对应参数的颜色数据的网站：

Hex to RGB Color Converter

<style>
  .submit-button {
    background-color: rgb(150, 24, 24);
    color: white;
    border: none;
    height: 36px;
    width: 105px;
    border-radius: 2px;
    /* 这个是边角变为圆形*/
    cursor: pointer;
    /*这个就是鼠标放在这个按钮上会指针*/
    margin-right: 8px;
    /* 这个就是右边距离设置 */
    transition: opacity 0.15s;
    /* 为了hover和active改变的不是那么突兀，采用这个参数实现渐变过渡 */
  }

  .submit-button:hover {
    opacity: 0.7;
    /* 不透明度 */
  }

  .submit-button:active {
    opacity: 0.4;

  }

  .join-button {
    background-color: white;
    color: blue;
    border-width: 2px;
    border-color: blue;
    border-style: solid;
    /* 如果没有这个格式，很可能这个颜色是渐变蓝色框 */
    height: 36px;
    width: 56px;
    border-radius: 2px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 1s,
      color 1s,


  }

  .join-button:hover {
    background-color: blue;
    color: white;

  }

  .join-button:active {
    opacity: 0.7;

  }

  .Tweet-buttton {
    background-color: rgb(2, 158, 255);
    color: white;
    border: none;
    height: 36px;
    width: 60px;
    border-radius: 18px;
    font-weight: bold;
    /* 加宽了字体 */
    font-size: 15px;
    /* 字体大小 */
    cursor: pointer;
    transition: box-shadow 0.15s;

  }

  .Tweet-buttton:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);

  }
</style>
<button class="submit-button">SUBMMIT</button>
<!-- 没有这个class就没办法区别不同的button设置 -->

<button class="join-button">JOIN</button>

<button class="Tweet-buttton">Tweet</button>