前端css学习案例（1）-button初始格式+格式调整

一、仿照一些出名的website上的button来设置对应规格：

本次使用的工具：vscode 

文件命名：button.html

基本使用案例方式：class+参数（color 颜色/border 边框/height 高/weight 宽/cursor 光标/margin 边缘距离）

想要反复修改button里面的文案，不想直接设定button的高度，也可以通过padding-top和padding-bottom/right/left来调整对应的高度和宽度，这个一直是相对的宽高，不会受到整体的限制的影响。

如果写了好几个按钮，突然发现字都在一行，但是按钮歪歪扭扭不在一起，使用这个参数保证他们都是来按照距离website最顶端的距离来安排和设置的：vertical-align,如果后面跟着top就是按照顶端来对齐了

<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;
    /* 这个就是右边距离设置 */
  }

  .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;
  }

  .Tweet-buttton {
    background-color: skyblue;
    color: white;
    border: none;
    height: 36px;
    width: 60px;
    border-radius: 18px;
    font-weight: bold;
    /* 加宽了字体 */
    font-size: 15px;
    /* 字体大小 */
    cursor: pointer;

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

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

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

如果只想改变某个边界的话：

border-bottom-width: 1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(240, 240, 240) ;

如果想要设置点击效果的话：

<button class="join-button" onclick="alert('hello');">JOIN</button>