Создание кнопок средствами CSS - HTML.

На фото Саид

Создание кнопок средствами CSS - HTML.
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу,
как сделать в HTML документе бегущую строку.
Это, своего рода, примитивная анимация на веб сайте
без использования графических редакторов.
Бегущую строку можно использовать для вывода новостей,
акций, рекламного сообщения и даже для красивых дизайнерских моментов
(например: облако в небе передвигается в шапке сайта).
Я думаю, вы сами найдете применение бегучей строке на своем сайте,
а моя задача сейчас рассказать, Для создания бегущей строки используют тег:

1 2
Вставить нужный код в HTML.

========Код рамки в HTML=======
<button class="dias-001" type="button">Кнопка dias-001!</button>
===========Код в CSS:==========
.dias-001 {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.dias-001:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.dias-001:active {
    color: #000
}

.dias-001:active:after {
    background: transparent;
}

.dias-001:hover:before {
    opacity: 1;
}

.dias-001:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
===============================

===============================

кнопка-002
===============================

кнопка-003

===============================

кнопка-004
===============================

кнопка-005
===============================

кнопка-006
===============================

========Код рамки в HTML=======
<a href="#" class="dias-007">кнопка-007</a>
===========Код в CSS:==========
a.dias-007 {
  position: relative;
  display: inline-block;
  font-size: 100%;
  font-weight: 700;
  color: #fff;
  text-shadow: #053852 -1px 1px, #053852 1px 1px, #053852 1px -1px, #053852 -1px -1px;
  text-decoration: none;
  user-select: none;
  padding: .3em .7em;
  outline: none;
  border-radius: 7px;
  background: #053852 repeating-linear-gradient(135deg, #053852, #053852 10px, #1679ad 10px, #1679ad 20px, #053852 20px);
  box-shadow:
   inset -2px -2px rgba(0,0,0,.3),
   inset 2px 2px rgba(255,255,255,.3);
  transition: background-position 999999s, color 999999s, text-shadow 999999s;
}
a.dias-007:hover, a.dias-007:focus {
  text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px;
  background: #0175b1 repeating-linear-gradient(135deg, #0175b1, #0175b1 10px, #8fd2f5 10px, #8fd2f5 20px, #0175b1 20px) no-repeat;
  background-size: 1000% 100%;
}
a.dias-007:hover {
  background-position: 0 0;
}
a.dias-007:focus {
  color: rgba(255,255,255,0);
  text-shadow: rgba(1,117,177,0) -1px 1px, rgba(1,117,177,0) 1px 1px, rgba(1,117,177,0) 1px -1px, rgba(1,117,177,0) -1px -1px;
  background-position: 900% 0;
  transition: background-position linear 600s, color .5s, text-shadow .5s;
}
a.dias-007:after {
  content: "загрузка\2026";
  position: absolute;
  top: 0;
  left: 0;
  padding: .3em .7em;
  color: rgba(0,0,0,0);
  text-shadow: none;
  transition: 999999s;
}
a.dias-007:focus:after {
  color: #fff;
  text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px;
  transition: .5s;
}
===============================

кнопка-007
===============================

кнопка-008
===============================

========Код рамки в HTML=======
<a href="#" class="dias-009">кнопка-009</a>
===========Код в CSS:==========
a.dias-009 {
  position: relative;
  z-index: 1;
  color: black;
  font-size: 135%;
  font-weight: 700;
  text-decoration: none;
  padding: .25em .5em;
}
a.dias-009:after {
  content: "Купить";  /* здесь 6 букв */
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: calc(100% + 6*(1em*90/135) - 2px*2*2);  /* где 6*(1em*90/135), где 6 - это 6 букв, 90 - это font-size after, а 135 - это font-size родителя */
  text-align: right;
  color: #fff;
  font-size: 90%;
  padding: .25em .5em;
  border-radius: 5px;
  border: 2px solid #c61e40;
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  background: linear-gradient(#d4536d, #c61e40) no-repeat 100% 0;
  background-size: calc(6*(1em*90/135) + .5em) 100%;
  box-shadow: inset calc(-6*(1em*90/135) - .5em) 0 rgba(255,255,255,0);
  transition: .3s;
}
a.dias-009:hover:after {
  box-shadow: inset calc(-6*(1em*90/135) - .5em) 0 rgba(255,255,255,.2);
}
a.dias-009:active:after {
  background-image: linear-gradient(#c61e40, #d4536d);
}
===============================

кнопка-009
===============================

кнопка-010
===============================

========Код рамки в HTML=======
<a href="#" class="dias-011">кнопка-011</a>
===========Код в CSS:==========
a.dias-011 {
  display: inline-block;
  font-family: arial,sans-serif;
  font-size: 11px;
  color: rgb(205,216,228);
  text-shadow: 0 -1px rgb(46,53,58);
  text-decoration: none;
  user-select: none;
  line-height: 2em;
  padding: 1px 1.2em;
  outline: none;
  border: 1px solid rgba(33,43,52,1);
  border-radius: 3px;
  background: rgb(81,92,102) linear-gradient(rgb(81,92,102), rgb(69,78,87));
  box-shadow:
   inset 0 1px rgba(101,114,126,1),
   inset 0 0 1px rgba(140,150,170,.8),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
}
a.dias-011:active {
  box-shadow:
   inset 0 1px 3px rgba(0,10,20,.5),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
}
a.dias-011:focus:not(:active) {
  border: 1px solid rgb(22,32,43);
  border-bottom: 1px solid rgb(25,34,45);
  background: rgb(53,61,71);
  box-shadow:
   inset 0 1px 3px rgba(0,10,20,.5),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
  pointer-events: none;
}
===============================

кнопка-011
===============================

========Код рамки в HTML=======
<a href="#" class="dias-012">кнопка-012</a>
===========Код в CSS:==========
a.dias-012 {
  display: inline-block;
  width: 5em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  user-select: none;
  color: rgb(0,0,0);
  outline: none;
  border: 1px solid rgba(0,0,0,.4);
  border-top-color: rgba(0,0,0,.3);
  border-radius: 2px;
  background: linear-gradient(rgb(255,255,255), rgb(240,240,240));
  box-shadow:
   0 0 3px rgba(0,0,0,0) inset,
   0 1px 1px 1px rgba(255,255,255,.2),
   0 -1px 1px 1px rgba(0,0,0,0);
  transition: .2s ease-in-out;
}
a.dias-012:hover:not(:active) {
  box-shadow:
   0 0 3px rgba(0,0,0,0) inset,
   0 1px 1px 1px rgba(0,255,255,.5),
   0 -1px 1px 1px rgba(0,255,255,.5);
}
a.dias-012:active {
  background: linear-gradient(rgb(250,250,250), rgb(235,235,235));
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 1px 1px 1px rgba(255,255,255,.4),
   0 -1px 1px 1px rgba(0,0,0,.1);
}
===============================

кнопка-012
===============================

кнопка-013
===============================

кнопка-014
===============================
1 2