zoukankan      html  css  js  c++  java

  • Ghost Button制作教程及设计趋势分析

    概述：Ghost Button（虚拟按钮）是网页设计中一个非常实用的按钮样式，特别是图片背景中，有出色的效果。今天我们一起来研究Ghost Button的各种效果的制作方法，并对Ghost Button在web设计中的发展趋势进行分析。

    Ghost Button设计趋势

    1、图片背景：Ghost buttons使用优秀的图片背景，图片上 的按钮不会影响用户观看图片。可以给用户一个非常帮的可视化效果。

    2、白色是流行的Ghost Button颜色：Ghost buttons可以设置任何你想要的颜色，你可以根据自己的图片选择相应颜色，不过白色比较流行。

    3、CSS转换：我们可以使用CSS增强Ghost buttons的效果。

    下面我们就来开启Ghost Button设计之旅。

    效果图：

    Ghost buttons

    步骤一：HTML

    我们使用HTML元素来展现

    步骤二：CSS

    我们来体验下Ghost button的8中变换：

    • 基本Ghost Button
    • 圆角
    • 简单过渡效果
    • 厚边框
    • 半透明淡色效果
    • 边框淡颜色
    • 黑白效果
    • 尺寸过渡效果

    1、基本Ghost Button

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .ghost-button {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 1px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    }

    这些都是基本的CSS属性，制作出基本Ghost Button效果。如果需要变化，我们只需要修改属性或添加属性。

    我们这里是一个悬停效果，用户鼠标悬停或激活Ghost Button，有指示出现。我们使用伪类： :hover and :active

    1
    2
    3
    4
    5
    .ghost-button:hover,
    .ghost-button:active {
    background-color: #fff;
    color: #000;
    }

    2、圆角

    添加border-radius可以为ghost buttons添加圆角效果：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .ghost-button-rounded-corners {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    text-align: center;
    outline: none;
    text-decoration: none;
    }
    .ghost-button-rounded-corners:hover,
    .ghost-button-rounded-corners:active {
    background-color: #fff;
    color: #000;
    }

    3、简单的过渡效果

    使用CSS transition属性来实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .ghost-button-transition {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: background-color 0.2s ease-out,
    color 0.2s ease-out;
    }
    .ghost-button-transition:hover,
    .ghost-button-transition:active {
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s ease-in,
    color 0.3s ease-in;
    }

    4、厚边界

    使用border-size，将其设置为自己想要的大小：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .ghost-button-thick-border {
    display: inline-block;
    width: 200px;
    font-weight: bold;
    padding: 8px;
    color: #fff;
    border: 3px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: background-color 0.2s ease-out,
    color 0.2s ease-out;
    }
    .ghost-button-thick-border:hover,
    .ghost-button-thick-border:active {
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s ease-in,
    color 0.3s ease-in;
    }

    5、半透明褪色效果

    使用rgba()功能，下面我们要实现背景、边界为白色，40%透明，我们可以如下设置：

    rgba(255, 255, 255, 0.4)

    rgba()功能是CSS特性，不一定所有浏览器都支持，所以，我们可以使用十六进制符号以防万
    一。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .ghost-button-semi-transparent {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: background-color 0.2s ease-out,
    border-color 0.2s ease-out;
    }
    .ghost-button-semi-transparent:hover,
    .ghost-button-semi-transparent:active {
    background-color: #fff; /* fallback */
    background-color: rgba(255, 255, 255, 0.4);
    border-color: #fff; /* fallback */
    border-color: rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease-in,
    border-color 0.3s ease-in;
    }

    6、边框颜色透明效果

    修改CSS transition属性实现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .ghost-button-border-color {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: border-color 0.3s ease-out,
    color 0.3s ease-out;
    }
    .ghost-button-border-color:hover,
    .ghost-button-border-color:active {
    color: #66d8ed;
    border-color: #66d8ed;
    transition: border-color 0.4s ease-in,
    color 0.4s ease-in;
    }

    7、全部透明

    修改CSS transition属性，并改变background-color属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .ghost-button-full-color {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: color 0.3s ease-out,
    background-color 0.3s ease-out,
    border-color 0.3s ease-out;
    }
    .ghost-button-full-color:hover,
    .ghost-button-full-color:active {
    background-color: #9363c4;
    border-color: #9363c4;
    color: #fff;
    transition: color 0.3s ease-in,
    background-color 0.3s ease-in,
    border-color 0.3s ease-in;
    }

    8、尺寸过渡效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .ghost-button-size-transition {
    display: inline-block;
    width: 200px;
    height: 25px;
    line-height: 25px;
    margin: 0 auto;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: width 0.3s ease-out,
    height 0.3s ease-out,
    line-height 0.3s ease-out;
    }
    .ghost-button-size-transition:hover,
    .ghost-button-size-transition:active {
    width: 220px;
    height: 45px;
    line-height: 45px;
    transition: width 0.1s ease-in,
    height 0.1s ease-in,
    line-height 0.1s ease-in;
    }

    英文原文：http://sixrevisions.com/css/ghost-buttons/
  • 相关阅读:
    Delphi中Format与FormatDateTime函数详解
    常用的日期时间函数
    100m和1000m网线的常见制作方法
    Delphi cxGrid –--> RecordIndex out of Range
    局域网共享需要密码
    提高AdoQuery的速度
    string literals may have at most 255 elements
    001-project基本使用
    Java-idea-创建maven项目，部署项目，部署服务器，简单测试
    003-spring结合java类调用quartz
  • 原文地址：https://www.cnblogs.com/goodbeypeterpan/p/4287963.html
Copyright © 2011-2022 走看看