Форум PHP программистов > Как сверстать такую кнопку ?

UnWind

20.05.2014 - 07:18

Здравствуйте, не могли бы Вы подсказать - как лучше сверстать кнопку, которая на картинке ниже ?

Заранее Вас благодарю!

_____________
Искусство программирования - заставить компьютер делать всё то, что Вам делать лень!

Игорь_Vasinsky

20.05.2014 - 07:28

Тута http://jsfiddle.net/FaKth/3/

<style>
div.button{
    border:1px solid gray;
    width:200px;
    height:50px;
    vertical-align: text-bottom;
    font-weight: bold;
    background-image: url('https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-shuffle-20.png');
    background-repeat: no-repeat;
    background-position: center right 20px;
    cursor:pointer;
}
div.button img{
    margin:2px;
}
</style>
<div class="button">
   <img align="middle" src="https://cdn2.iconfinder.com/data/icons/seo-web-optomization-ultimate-set/512/audio_m    arketing-48.png"/>
       Шагай туда)
</div>

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

Игорь_Vasinsky

20.05.2014 - 07:39

или так) http://jsfiddle.net/FaKth/4/

<style>
div.button{
    border:1px solid gray;
    width:200px;
    height:50px;
    vertical-align: text-bottom;
    font-weight: bold;
    background-image: url('https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-shuffle-20.png');
    background-repeat: no-repeat;
    background-position: center right 20px;
    cursor: pointer;
}
div.button:hover{
    background-image: url('https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-shuffle-16.png');
    background-repeat: no-repeat;
    background-position: center right 20px;
    color:red;
}
div.button img{
    margin:2px;
}
</style>
<div class="button" onclick="go('http://google.com')">
   <img align="middle" src="https://cdn2.iconfinder.com/data/icons/seo-web-optomization-ultimate-set/512/audio_m arketing-48.png"/>
       Шагай туда)
</div>

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

UnWind

20.05.2014 - 07:46

Цитата (Игорь_Vasinsky @ 20.05.2014 - 10:39)

или так) http://jsfiddle.net/FaKth/4/

<style>
div.button{
    border:1px solid gray;
    width:200px;
    height:50px;
    vertical-align: text-bottom;
    font-weight: bold;
    background-image: url('https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-shuffle-20.png');
    background-repeat: no-repeat;
    background-position: center right 20px;
    cursor: pointer;
}
div.button:hover{
    background-image: url('https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-shuffle-16.png');
    background-repeat: no-repeat;
    background-position: center right 20px;
    color:red;
}
div.button img{
    margin:2px;
}
</style>
<div class="button" onclick="go('http://google.com')">
   <img align="middle" src="https://cdn2.iconfinder.com/data/icons/seo-web-optomization-ultimate-set/512/audio_m  arketing-48.png"/>
       Шагай туда)
</div>

Спасибо большое, буду пробовать!
Ранее просто не приходилось такие кнопки делать)

_____________
Искусство программирования - заставить компьютер делать всё то, что Вам делать лень!

BaNru

20.05.2014 - 07:51

Ещё вот так, через after и before
http://jsfiddle.net/BaNru/aXbcq/

Или вариант проще и кроссбраузерный (кроме бордер радиус)
http://jsfiddle.net/BaNru/aXbcq/1/

Вариант картинка картинкой, а не фоном на стилях
http://jsfiddle.net/BaNru/aXbcq/2/

Но ни в коем случае не делай как выше предолжено - через дивы и онклики!
Это не семантично и это говнокод!

Игорь_Vasinsky

20.05.2014 - 07:59

BaNru
с after и before - IE < 8 - тебя так на * покрутит - что потом и заказчику захочется - так же с тобой поступить.

Цитата

это говнокод!

до до))

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

BaNru

20.05.2014 - 08:02

До до до
Я привел ещё два варианта кроссбраузерных.

А ты привел говнокод!

UnWind

20.05.2014 - 08:04

Цитата (BaNru @ 20.05.2014 - 11:02)

До до до
Я привел ещё два варианта кроссбраузерных.

А ты привел говнокод!

Ахах) Спасибо!)
Давненько меня тут не было, и забыл как весело!)

_____________
Искусство программирования - заставить компьютер делать всё то, что Вам делать лень!

Игорь_Vasinsky

20.05.2014 - 08:08

BaNru
Ооо.. давай из ссылок делать квадраты)))

за говнокод ответь - ты то никто и звать тебя никак.

обоснования нет. балаболишь налево на право))

семантичность тут как раз в том - что обозначение кнопки как блока, а не тега a - квадратного вида.

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

UnWind

20.05.2014 - 08:25

Цитата (Игорь_Vasinsky @ 20.05.2014 - 11:08)

BaNru
Ооо.. давай из ссылок делать квадраты)))

за говнокод ответь - ты то никто и звать тебя никак.

обоснования нет. балаболишь налево на право))

семантичность тут как раз в том - что обозначение кнопки как блока, а не тега a - квадратного вида.

Гг) Ребят по углам) Все молодцы)

_____________
Искусство программирования - заставить компьютер делать всё то, что Вам делать лень!

BaNru

20.05.2014 - 08:45

Цитата (Игорь_Vasinsky @ 20.05.2014 - 08:08)

BaNru
Ооо.. давай из ссылок делать квадраты)))

за говнокод ответь - ты то никто и звать тебя никак.

обоснования нет. балаболишь налево на право))

семантичность тут как раз в том - что обозначение кнопки как блока, а не тега a - квадратного вида.

Что тебе отвечать?
Это кнопка - ссылка. Ссылка должна оставаться ссылкой.
Если это кнопка. То точно также можно сделать через input или button (разумеется тут уже будет form и action).

Использование onclick - это последнее дело для обычного перехода, с которым справляется href - чистый говнокод.

Так что не путай семантику с представлением.

А кто есть кто. Ты не борзей. Ты для меня тоже ни кто, не расстраивайся.

PS И да, ссылки можно делать хоть треугольниками, хоть кругами и раскрашивать в серобуромалиновый цвет если это заложено в дизайне.

Игорь_Vasinsky

20.05.2014 - 08:50

Цитата

Это кнопка - ссылка. Ссылка должна оставаться ссылкой.

это тебе в твою голову пришла эта мысль

кнопка -это кнопка, ссылка - это ссылка.

а далее даже читать не интересно.

Цитата

А кто есть кто. Ты не борзей. Ты для меня тоже ни кто, не расстраивайся.

да клал я на тебя 8 куч)) и класть каждый раз буду - на мой код ты необоснованную байду несёшь - или на чей либо.

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

BaNru

20.05.2014 - 08:57

Хорошо, забьем на твою борзоту из-за ума и интернетов.

Давай подойдем с другой стороны.
Как проверяется семантика?

redreem

20.05.2014 - 08:59

кому нахер нужна эта семантика?

делай нормальные сайты для людей, а не накрученную байду с копипастами.

Игорь_Vasinsky

20.05.2014 - 09:02

Цитата

Хорошо, забьем на твою борзоту из-за ума и интернетов.

Давай подойдем с другой стороны.
Как проверяется семантика?

мне твои одолжения нахер не упали.

посмотри определение в вики, ты мне говоришь что я путаю симантику с представлением - а на самом деле ты перепутал голову с жопой - думать надо одним, а гадить другим.

лирическое отступление 16+

геннадий был гуманитарий
он не умел ложить кирпичь
не мог нести мешок с картошкой
зато любил нести хуйню

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker