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,645
    317
    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
    278
    54
    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...