To make the 43 Media site responsive, I had to change some width’s to percentage values, and create some media queries to give varying styling results on the iPad, iPhone size browsers etc.

I’ve decided to write a short tutorial on making a responsive web design template. It should be going up in a couple of days, so keep an eye out for that.

Demo

Google recently released a new design and look of their entire site, even their homepage has had a re-design, I liked the new look of the buttons so much that I decided to recreate them.

So, you can look at the demo file, and see the end result. First of all I created some semantic HTML buttons in a test file.

  <form>
    <input class="button" type="submit" value="Google Search">
    <input class="button" type="submit" value="I'm Feeling Lucky">
  </form>

Okay, that gives us two generic buttons which we can style at will with the “button” class name. We’re going to add some linear gradients to the background with a solid color as a graceful downgrade, some border radius to give us the rounded corners, a border and some typography styles.

  .button {
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#F1F1F1);
    background-image: -o-linear-gradient(top,#f5f5f5,#F1F1F1);
    background-color: #f5f5f5;
    padding: 6px 5px;
    text-align: center;
    border-radius: 2px;
    webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #666;
    font-weight: bold;
    width: auto;
    float: left;
    margin: 10px;
  }

That looks pretty similar to the new styles, but of course they’re not interactive, so let’s give them some hover styles.

  .button:hover {
    color: #333;
    box-shadow: 1px 1px 1px #eee;
    cursor: pointer;
  }

And finally, to finish off, an active state that just gives them a little button functionality

  .button:active {
    position:relative; top: 1px;
  }

So there you have it, some very simple, clean and nice looking search buttons. Very similar to the new Google make-over. I hoped you liked this mini-tutorial and I would very much appreciate a little re-tweet or 1+.

This is new, so I’ll just start out by explaining that I’m Harry Atkins, a freelance web, graphic and 3D designer, and in this blog I’ll be posting little articles, “tutorials” (using that term very lightly) and just random bits and bobs form around the internet about web design and basically anything I find cool or interesting! So I hope you like it, and please feel free to go through the other pages to find out more about me or look at my portfolio, and even contact me to talk about anything at all!

Hopefully be talking to you soon.

Oh and this is for Technorati U7RRUPHQC2Y6