Schubert's Blog

A biker and technology enthusiast's
view of the world

CSS Getting links to look like buttons

On, I've had places where I wanted to give the user a HTML link and a button, side-by-side, but they look nothing alike. For example, at the bottom of the 'Create a New Event' page, the user can click a link that took them back to their home page or a button to add a new event. Although, through the magic of CSS, it is possible to get the both of them to look identical. In Beta 1, I let this be, but, in Beta 2, I had to find a way to improve the overall page and website appeal and this was one of the major changes.

A normal HTML link tag looks like

<a href="/">Back to Home page</a>

and a button tag looks like

<button type="button">Add an event</button>

giving us:

Back to Home page

Now, for some CSS. Start by adding a border of 1 pixel, solid black to the style attribute of both the link and button. This will give both the tags a border and make them look like a custom styled button. This giving us:

Back to Home page

Then add a color value to both the style attributes. This will give the text in both the link and button the same color. I'll use hex codes #034AF3, as this is one of the primary colors of the Beta 2 color scheme. This gives us:

Back to Home page

Next give the link and buttons padding, so that they fill up and the border is not sticking to the text. I've used 5 pixels all round. This give us:

Back to Home page

Finally, give the both of them a background color, I've used white. On the link remove the text decoration. And on the button, set the cursor type to pointer, this will give the user a pointer icon when they hover over the button. And I had to set the font size to 1em to get the button to size up, this might not be necessary and depends on the site design. All Done! The final button and link look like:

Back to Home page

And the final markup for the link tag looks like:

<a href="/" 
style="border: 1px solid black;
color: #034af3;
padding: 5px;
background-color: #ffffff;
text-decoration: none;"
>Back to Home page</a>

and the button looks like

<button type="button" 
style="border: 1px solid black;
color: #034af3;
padding: 5px;
background-color: #ffffff;
font-size: 1em;
cursor: pointer;"
>Add an event</button>

Even though I've used the style attribute here, on a professional site I would recommend using the class tag and move all the styles into a CSS file. Usually followed by using a tool like CSSTidy to clean and compress the CSS file. I'm always open to hearing suggestion, on how to make CSS more effective and cross-browser complaint. Look forward to hearing from some design gurus and novices like myself.

By Schubert on 05 September 2010 12:43

Categories: Designing | Tags: , ,

Permalink | Comments (0)

Submit to DotNetKicks... Beta 1

I wanted a challenge, a website to work on from ideas and concepts, all the way to deploying the final product on an internet accessible server and getting public feedback.

The solution: is an event sharing website, to keep it short and simple. Although, its much more than that. The first Beta focused on bikers like myself. Besides the usual register, update my details and update my password page, the user should be able to plan a route online using Google Maps and upload a route in format like GPX, ITN, CSV, etc. They should also be able to download the routes in various GPS friendly formats (at least the well know devices) and share their planned rideout dates, details and route experiences in one central location. All very interesting, as I've never developed any of the above from scratch or seen anything like it on the web.

Technologies of choice: having worked on ASP.Net for over 3 year now, I wanted the developement process to be a challenge too. The ASP.Net MVC web framework being new and promising, served the purpose well. It allowed for cleaner SEO friendly urls and gave me full control over the HTML, prefect for learning some CSS at the same time. Having more exposure to the C# language over VB.Net, I decided to use C# 3.0 and taking advantage of the new LINQ To SQL ORM tool for the database access layer. Since needed to save GPS locations and needed to do searches and calculation based on global co-ordinate, like find rideouts planned within 5 miles of London, I decided to take advantage of the new spartial data types and function in MSSQL 2008.

The above technologies formed the base of Mapze Beta 1. The other technologies involved were Google Maps, so users could plan and amend their routes online. JQuery and Javascript to handle AJAX calls to google geo services and presenting them on the map. XML Parsing for reading GPX (XML) files. NUnit and Rhino mocks to follow the TDD style of progamming. MSSQL Full text indexing to search through event keywords. .Net Multilingual support, to make the website accessible in various language. Elmah and Log4Net to gracefully handle any error and warning on the website. DiscountASP.Net for hosting the website. And finally RapidSSL for the SSL certificate, for when users login and update their password.

Like most project I've worked on for clients and personal ones, I came away with some interesting lesson and a revised list of Do's and Don't's for future projects. These are a few lesson learnt from the first Beta:

  • Setting up SSL on IIS was a lot easier than I had initally though
  • CSS is a powerful display formatting language
  • Route formats are inconsistant, GPX being the most flexible and feature rich format
  • the .net build in Zipping classes are good, but ... library is better

Taking on the full software development life-cycle for even a simple concept website like, definitely involved a lot of creativity, architectural and scability considerations ... and a lot of hard work.

Screen shots of the final product: Beta 2 is live! Click here for more ...