当前位置: 移动技术网 > IT编程>网页制作>Html5 > 简约CSS按钮样式设计+文字特效

简约CSS按钮样式设计+文字特效

2018年09月16日  | 移动技术网IT编程  | 我要评论

9115sss,鼻护士,to love ova

按钮:

.blog-but{ /* 按钮美化 */
    width: 270px; /* 宽度 */
    height: 40px; /* 高度 */
    border-width: 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #1e90ff; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: microsoft yahei; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 17px; /* 字体大小 */
}
.blog-but:hover { /* 鼠标移入按钮范围时改变颜色 */
    background: #5599ff;

图片展示:

 

文字特效:

h1 { width:100%; display:block; line-height:1.5em; overflow:visible; font-size:22px; text-shadow:#f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0}/* 起关键作用的是:
 text-shadow:#f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0*/

图片展示:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网