Website building for internet of things

Discussion in 'Programmer's Corner' started by Parth786, Jan 7, 2018.

  1. be80be

    AAC Fanatic!

    Jul 5, 2008
    1,110
    201
    Well all this is what it take to make a nice button like this
    Code (Text):
    1. <style>.button {
    2.    border: 2px solid #0a3c59;
    3.    background: #3e779d;
    4.    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    5.    background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
    6.    background: -moz-linear-gradient(top, #65a9d7, #3e779d);
    7.    background: -ms-linear-gradient(top, #65a9d7, #3e779d);
    8.    background: -o-linear-gradient(top, #65a9d7, #3e779d);
    9.    background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
    10.    padding: 10.5px 21px;
    11.    -webkit-border-radius: 11px;
    12.    -moz-border-radius: 11px;
    13.    border-radius: 11px;
    14.    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    15.    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    16.    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    17.    text-shadow: #7ea4bd 0 1px 0;
    18.    color: #06426c;
    19.    font-size: 12px;
    20.    font-family: helvetica, serif;
    21.    text-decoration: none;
    22.    vertical-align: middle;
    23.    }
    24. .button:hover {
    25.    border: 2px solid #0a3c59;
    26.    text-shadow: #1e4158 0 1px 0;
    27.    background: #3e779d;
    28.    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    29.    background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
    30.    background: -moz-linear-gradient(top, #65a9d7, #3e779d);
    31.    background: -ms-linear-gradient(top, #65a9d7, #3e779d);
    32.    background: -o-linear-gradient(top, #65a9d7, #3e779d);
    33.    background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
    34.    color: #fff;
    35.    }
    36. .button:active {
    37.    text-shadow: #1e4158 0 1px 0;
    38.    border: 2px solid #0a3c59;
    39.    background: #65a9d7;
    40.    background: -webkit-gradient(linear, left top, left bottom, from(#7b98ab), to(#3e779d));
    41.    background: -webkit-linear-gradient(top, #7b98ab, #65a9d7);
    42.    background: -moz-linear-gradient(top, #7b98ab, #65a9d7);
    43.    background: -ms-linear-gradient(top, #7b98ab, #65a9d7);
    44.    background: -o-linear-gradient(top, #7b98ab, #65a9d7);
    45.    background-image: -ms-linear-gradient(top, #7b98ab 0%, #65a9d7 100%);
    46.    color: #fff;
    47.    }</style>
    Screenshot from 2018-01-12 10-19-11.png
    I used a tool for it its lot easier
    http://livetools.uiparade.com/button-builder.html#
     
    Parth786 likes this.
  2. xox

    Member

    Sep 8, 2017
    223
    48
    Take another look at the markup in the examples given by be80be. You can change the background color by modifying the button's stylesheet settings.
     
Loading...