饿了么按钮修改默认样式

最近在使用vue框架+element-ui搭建网站，对照AI文件的设计图来完善页面，作为一个小菜鸡，之前在学校的时候写页面或者是课设的时候都是能用则矣，从来不喜欢花更多的时间去扣像素或者是精细自己的CSS。所以写下这篇文章来记录一下自己，对饿了么UI框架的了解过程，对CSS的细碎知识的整理，以此勉励自己在前端的道路上继续前进。

1.先看设计图

这就是要完成的发送按钮。非常明显能看见的是大小，高宽，颜色和圆角等。我就直接想当然的直接上手写了，原生按钮改个颜色咯，加个圆角咯巴拉巴拉的。

 <button style="width: 155px;height: 50px;font-size: 21px;color: #fff;
 background-color: #1E88E5;border-raduis: 5px;">发送</button>

可是出来了个这玩意~

丑就算了，这和原设计图差的也太大了，这样会被像素警察抓走的吧……

害怕.jpg

然后我灵机一动啊，不还有饿了么这个好东西吗？赶紧安排，找啊找啊，终于找到个差不多的，

害，越看越顺眼，赶紧copy paste F5 一键三连安排！

<el-button type="primary" plain>主要按钮</el-button>

但是哈，差距还是有点大呀~不急不急，慢慢来

先把宽高、字体等加上，还有字体间距啥的也安排一下。

<el-button type="primary" style="width: 155px;
height: 50px;letter-spacing: 10px;font-size: 21px;">发送</el-button>

这个饿了么色好像不成，得改。 F12篡改底色！

.el-button--primary{
    color: #fff;
    background-color: #1E88E5;
    border-color: #1E88E5;
  }
  .el-button--primary:hover{
    background-color: #1E88E5;
    border-color: #1E88E5;  
  }
  .el-button--primary:focus{
    background-color: #1E88E5;
    border-color: #1E88E5;  
  }

嘻嘻，差不多了

收了收了拜了个拜。