input按钮样式美化

html/css 2020-03-31 370 次浏览 次点赞

昨天写JavaScript控制div属性的demo时,看到默认按钮实在丑得有点难受。
所以想了想,试着用css美化一下。
先来看效果:
美化前

1.png

美化后

2.png


当然,如果有人看到了这篇文章,还觉得我是把默认样式给丑化了,我也不说话了,毕竟每个人的审美是不一样,而且我这篇主要说的是方法思路,我也不是搞艺术的,没办法征服所有人,哈哈哈。

css部分代码

input{
border-color:aqua;background-color:#D9F2F4;color:#FA9193;font-weight:bolder;font-size:20px; width:100px;height:50px;
}

border-color更改边框颜色,background-color更改按钮背景颜色,color更改字体颜色,font-weight更改字体为粗体,font-size更改字体大小,width和height更改按钮大小。

html部分代码

<input type="button" value="变宽"/>

美化就完成了。


本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论