Home/ Questions/Q 8264761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T04:34:14+00:00

I create a web page to control my TV (See the figure below). When

  • 0

I create a web page to control my TV (See the figure below). When I click the button, the server receives the POST request and translates it to IR signals.

It works. But the UI looks ugly. I’m newbie of the web front-end. Is there any CSS library can make the buttons look better, or and some dynamic appearance with JS library?

BTW, the web server is hosted on Arduino, which has 2K memory, 16MHz CPU and 30k flash. So there isn’t enough memory to save the internal CSS. I want the html page as small as possible. What I’m looking for is the CSS which I can link.

TV controller

UPDATE 7/23/2012

I add the CSS code below and the buttons look letter, though it is not perfect enough.

button {
            display: inline-block;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1da36), color-stop(100%,#fcf088));
            background: -moz-linear-gradient(center top, #f1da36 0%, #fcf088 100%);
            -webkit-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            -moz-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            padding: 10px 15px;
            border-color: #ffffff;
            border-width: 1px;
            border-style: solid;
            font-size: 16px;
            color: #000000;
            font-weight: bold;
        }
        button:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeff07), color-stop(100%,#fcf088));
            background: -moz-linear-gradient(center top, #eeff07 0%, #fcf088 100%);
        }
        button:active {
            -webkit-box-shadow: 0px 0px 5px #333333 inset;
            -moz-box-shadow: 0px 0px 5px #333333 inset;
            box-shadow: 0px 0px 5px #333333 inset;
        }

IR Design 2

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could just do styling with CSS and save it in another file. Then you could host the CSS file on a separate server and link it externally.

    <head>
<link rel="stylesheet" type="text/css" href="http://www.myotherserver.com/mystyle.css" />
</head>

    If you don’t have other hosting set up, you could theoretically host the file using dropbox or something similar.

    http://www.maclife.com/article/howtos/how_host_your_website_dropbox

    If you aren’t looking to learn how to style CSS yourself, you can just copy something from a site like this, or generate it using one of the many generators out there.

    http://www.cssbutton.me/

    • 0