Layout of cross-browser and rubber buttons in html
On soma they share a topic that is not new, but often they make a lot of mistakes with this topic. Today, from my personal development experience, I want to share an interesting experience of layout buttons in html. The first thing we need is to correctly build the structure of the future button:
1 |
<a class="GlobalOrangeButton" href="https://wp-admin.com.ua"><span>Уроки WordPress</span></a> |
The CSS for this button will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a.GlobalOrangeButton span { background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff; } a.GlobalOrangeButton { background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; } a.GlobalOrangeButton:hover span { background-position: 0 -34px; color: #fff; } |
Everything is very simple, but sometimes this simple and effective layout method is forgotten, although many clients require both rounding and shadowing in IE 7. Also, the buttons will look good in opera browsers, firefox, safary, yandex browser and many others, even in older versions. All this can be done in the simplest way., which I showed you above.
This article was published from my own experience in website development and from my last layout of buttons. Take an example article from here. If the material is useful to you, write, I will be glad for your comments.
/*
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.