CSS3 Buttons with Icons
During the process of coding a web app we’ve been working on for a client, I decided that was time to go CSS3 with their buttons. After using the accessible CSS button technique for a while, it still felt really complicated and maintaining all those images was a pain if you had different sized buttons throughout your site.
So I started coding them up and realized that all the examples I had run across didn’t have icons! “That’s weird,” I thought. So I tried adding a background image and quickly understood why. In CSS3, the gradient background uses the background-image tag. So throwing an icon kills your gradient background.
Psst…If you’re really impatient you can see the demo here. Otherwise read on…
Now, I know that some browsers support multiple background images, but I needed something a bit more cross-browser. So how do we make this:
The Basics
Well, let’s start with a simple CSS3 button first, shall we? Here’s some styles to get us a nice looking button that falls back to a squared version in Internet Explorer. Thanks to CSS3 Please! we can even get the background gradient in IE.
a.button { background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #dbdbdb)); filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#dbdbdb'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#dbdbdb')"; border: 1px solid #fff; -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; padding: 5px 15px; text-decoration: none; text-shadow: #fff 0 1px 0; float: left; margin-right: 15px; margin-bottom: 15px; display: block; color: #597390; line-height: 24px; font-size: 20px; font-weight: bold; } Then we lighten the gradient and change the color on hover:
a.button:hover { background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #eeeeee)); filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#eeeeee'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#eeeeee')"; color: #000; display: block; } And finally inverse the gradient and text shadow and move it down one pixel on click.
a.button:active { background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #dbdbdb),color-stop(1, #ffffff)); filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#dbdbdb', EndColorStr='#ffffff'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#dbdbdb', EndColorStr='#ffffff')"; text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5); margin-top: 1px; } Oh! And don’t forget to add a stroke for Internet Explorer since it won’t render that drop shadow. I’ve put it in an IE-specific stylesheet.
a.button { border: 1px solid #979797; } Adding the Icon
Back to the icon question. How do we add an icon to this that will work cross-browser? Easy! Just add a span around the text. Sounds familiar, right? Add a class of icon and the name of the icon you want as well.
In your CSS use this code for the icon class
a.button.icon { padding-left: 11px; } a.button.icon span{ padding-left: 36px; background: url(images/icons.png) no-repeat 0 -4px; } Then grab some icons. I’m using the nice set from Greepit. I’ve been trying to sprite related images like this so I put one together for this example. Sprites can drastically cut down on your http requests, especially in a large web app with lots of icons. Then just position the icon image file depending on the icon you choose:
a.button.icon.chat span { background-position: 0px -36px; } And that’s pretty much it! You can see other than rounded corners and drop shadows the buttons work great even back to IE6 – though you’ll have to figure out transparent .png issues yourself
I’ve put together a simple page with a few examples here (and the code will be formatted without line breaks). Go forth and make kick-awesome buttons!
Как сделать кнопку в HTML
Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:
Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .
Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.
Атрибут disabled блокирует доступ к кнопке.
Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:
button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.
submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.
reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.
А как же input?
Создать кнопку можно и с помощью тега , если указать ему тип button :
Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .
Как сделать кнопку с иконкой
Посмотрим три способа создания кнопки с иконкой.
С помощью тега
Способ подойдёт для контентных изображений.
Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.
Добавить инлайн SVG в разметку
Способ подойдёт, если изображение меняет состояния, как здесь:
Код простой: пишем тег и добавляем в него код SVG-изображения.
Вставить фоном в CSS
Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:
Как добавить иконку в кнопку:
Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
How to add an icon inside the button using CSS
First, we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
lang="en"> charset="UTF-8" /> How to add icon inside button using CSS Only name="viewport" content="width=device-width, initial-scale=1.0" /> http-equiv="X-UA-Compatible" content="ie=edge" /> rel="stylesheet" href="style.css" /> href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> class="button-outer"> class="button"> Book Now Step:2
Then we need to add code for style.css which code I provide in the below screen.
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css); * padding: 0; margin: 0; font-family: 'IBM Plex Sans', sans-serif; > body display: flex; align-items: center; justify-content: center; height: 100vh; > .button font-size: 25px; padding: 10px 20px; background: #3f0069; border: unset; color: #fff; cursor: pointer; box-shadow: 0 0 2px #000; outline: 0; position: relative; > .button:before content: "\f017"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; >