自学内容网 自学内容网

CSS技巧 - 一日一例 (1):会讨好的热情按钮

题外话:

从今天开始,我准备开设一个新的专栏,专门写 使用CSS实现各种酷炫按钮的方法,本专栏目前准备写40篇左右,大概会完成如下按钮效果:

今天,我来介绍第一个按钮的实现方法:会讨好的热情按钮。为什么我给它起这样的名字呢?你看它像不像一个不停摇尾巴的小黄?当你鼠标移动到它头上,它的文字还会转起来,像是眯起来的萌眼睛。

开工前的准备工作

在制作按钮之前,我们通常要做一件事:清除浏览器的默认样式。相信很多小伙伴都知道该怎么做。我这里就不多说了,简单写几行不影响做按钮的表现就行了。

清除浏览器的默认样式

*{
  margin:0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}  

其他需要的CSS

定义页面基本颜色:
:root{
  --main-bg-color: #222;  /* 背景色*/
  --color:#000;
 /* 前景色 */
}
设定body的样式:
body {
  width:100%;
  height: auto;
  background: var(--main-bg-color);   
}
清除button控件的默认边框:
button{
  outline: 0;
  border: none;
}
给按钮安一个家:
.container{
  /* 居中 */
  position: fixed;  
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
}

(这一步不是必须的,我只是习惯性的让可见元素在页面居中,这样看起来美观,也不用总往屏幕左上角去歪头或斜眼睛)

好了


原文地址:https://blog.csdn.net/uuplay0216/article/details/140277421

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!