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

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

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

кнопка-021

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

========Код кнопки для HTML=======
<a href="#" class="dias-022">кнопка-022</a>
===========Код в CSS:==========
a.dias-022 {
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.dias-022:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.dias-022:active {
  top: 1px;
}
===============================

Стеклянная
===============================

кнопка-023

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

========Код кнопки для HTML=======
<a href="#" class="dias-024">кнопка-024</a>
===========Код в CSS:==========
a.dias-024 {
  display: inline-block;
  color: #000;
  font-size: 12px;
  text-decoration: none;
  user-select: none;
  padding: 0 5px;
  outline: none;
  border-radius: 2px;
}
a.dias-024:before {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;  /* для больших картинок 0 */
  padding-right: 5px;
}
a.dias-024[data-twitter]:before {content: url(http://favicon.yandex.net/favicon/twitter.com);}
a.dias-024[data-vk]:before {content: url(http://favicon.yandex.net/favicon/vk.com);}
a.dias-024[data-facebook]:before {content: url(http://favicon.yandex.net/favicon/facebook.com);}
a.dias-024:hover {
  background: linear-gradient(#ececeb, #eaeaea);
  box-shadow:
   inset rgba(0,0,0,.5) 0 -1px 1px,
   inset rgba(0,0,0,.2) 0 1px,
   inset #fff 0 2px,
   rgba(0,0,0,.2) 0 1px 1px;
}
a.dias-024:active {
  background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
  box-shadow:
   inset rgba(0,0,0,.8) 0 1px 2px,
   inset rgba(0,0,0,.05) 0 -1px 0,
   #fff 0 1px 1px;
}
===============================

twitter VK facebook
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-025">кнопка-025</a><br />
===========Код в CSS:==========
a.dias-025 {
  display: inline-block;
  font-size: 12px;
  color: rgb(205,216,228);
  text-decoration: none;
  padding: .2em .8em;
  outline: none;
  border-right: 1px solid rgba(13,20,27,.5);
  border-top: 1px solid rgba(270,278,287,.01);
  background-color: rgb(64,73,82);
  background-image:
   radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
   radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
   linear-gradient(rgb(64,73,82), rgb(72,81,90));
}
a.dias-025:hover {
  background-image:
   radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
   radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
   linear-gradient(rgb(51,60,67), rgb(58,65,72));
}
a.dias-025:focus {
  color: rgb(245,247,250);
  border-top: 1px solid rgb(67,111,136);
  background-image:
   linear-gradient(rgb(46,95,122), rgb(36,68,92));
}
a.dias-025:focus:hover {
  border-top: 1px solid rgb(49,87,107);
  background-image:
   linear-gradient(rgb(33,77,98), rgb(29,57,77));
}
===============================

кнопка 025
===============================

1 2 3
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-027">кнопка-027</a>
===========Код в CSS:==========
a.dias-027 {
  display: inline-block;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0,0,0,.5);
  user-select: none;
  padding: .7em 1.5em;
  border: 1px solid rgb(80,32,0);
  border-radius: 5px;
  outline: none;
  background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%);
  box-shadow:
   0 6px rgb(86,38,6),
   0 3px 15px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  transition: .2s;
} 
.dias-027:hover {
  background: rgb(167,91,41) linear-gradient(rgb(126,69,31), rgb(167,91,41) 80%);
}
.dias-027:active {
  background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41));
  box-shadow:
   0 2px rgb(86,38,6),
   0 1px 6px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
}
===============================

кнопка-027
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-028">кнопка-028</a>
===========Код в CSS:==========
a.dias-028 {
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: hsl(88, 70%, 30%);
  text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,.2) 0 .18em .15em;
  text-decoration: none;
  user-select: none;
  margin: .5em;
  padding: .5em .6em .4em .6em;
  border-radius: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  outline: none;
  background: #a2cf70 radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5));
  box-shadow:
   inset rgba(255,255,255,.6) 0 .3em .3em,
   inset rgba(0,0,0,.2) 0 -.1em .3em,
   rgb(128,161,103) 0 7px 1px,
   rgba(0,0,0,.2) 0 .5em 5px;
  transition: background .2s ease-in-out;
}
a.dias-028:hover {
  background-color: hsl(88, 70%, 75%);
}
a.dias-028:active {
  top: .2em;
  color: rgba(254,255,255,.9);
  text-shadow: rgba(0,0,0,.2) 0 1px 2px;
  box-shadow:
   inset rgba(255,255,255,.6) 0 .3em .3em,
   inset rgba(0,0,0,.2) 0 -.1em .3em,
   rgba(0,0,0,.4) 0 .1em 1px,
   rgba(0,0,0,.3) 0 .2em 6px;
}
a.dias-028:after {
  content:  "";
  position:  absolute; 
  width:   90%;
  height:  60%;
  top:   0;
  left:   5%;    
  border-radius:    .5em .5em 1em 1em / .5em .5em 2em 2em;
  background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.3)); 
}
.dias-028:active:after {
  opacity: .6;
}
===============================

кнопка-028
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-029">кнопка-29</a>
===========Код в CSS:==========
a.dias-029 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  text-shadow: -2px 2px rgba(255,255,255,.3);
  line-height: 1.1;
  padding: .5em 3em .5em .6em;
  background: linear-gradient(#ecc92b, #fce25b);
  box-shadow:
   0 0 0 1px #fce25b inset,
   -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
   -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
   -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
   -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
   -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
   -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2),
   -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1),
   -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0),
   -7px 9px 1px rgba(0,0,0,.4),
   -5px 11px 1px rgba(0,0,0,.2),
   -1px 13px 4px rgba(0,0,0,.2),
   4px 16px 7px rgba(0,0,0,.3);
  transition: .4s;
}
a.dias-029:active {
  box-shadow: none;
  -webkit-transform: translate(-7px, 8px);
  transform: translate(-7px, 8px);
}
a.dias-029:after {
  content: "";
  position: absolute;
  top: calc(50% - .6em/2);
  right: .6em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: .37em solid;
  border-top: none;
  border-left: none;
  width: .6em;
  height: .6em;
  box-shadow: inset -2px 2px rgba(255,255,255,.3);
}
===============================

кнопка-
029

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

========Код кнопки для HTML=======
<a href="#" class="dias-030">кнопка-030</a>
===========Код в CSS:==========
a.dias-030 {
  display: inline-block;
  color: rgba(255,255,255,1.8);
  text-decoration: none;
  text-shadow: 0 0 1px rgb(3,43,58);
  padding: .8em 1.2em;
  background: #0E8BB8 linear-gradient(#0A5E7D, #0E8BB8);
  box-shadow:
   0 15px 12px -12px rgb(0,0,0),
   0 -2px 0 -1px rgb(20,110,140),
   0 -4px 0 -2px rgb(18,108,138),
   0 -6px 0 -3px rgb(16,106,136),
   0 -8px 0 -4px rgb(14,104,134),
   0 -10px 0 -5px rgb(12,102,132),
   0 -12px 0 -6px rgb(10,100,130);
}
a.dias-030:active {
  margin: 0 calc(2px + 6px) 2px 0;
  padding: calc(.8em - 2px) calc(1.2em - 6px - 2px);
  border-left: 2px solid rgb(150,150,150);
  border-right: 2px solid rgb(150,150,150);
  border-bottom: 2px solid rgb(230,230,230);
  background: rgb(44,160,202) linear-gradient(rgb(62,184,229), rgb(44,160,202));
  box-shadow: none;
  -webkit-transform: translate(6px, -6px);
  transform: translate(6px, -6px);
}
===============================

кнопка-030
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-031">кнопка-031</a>
===========Код в CSS:==========
a.dias-031 {
  position: relative;
  display: inline-block;
  width: 6em;
  height: 2.5em;
  line-height: 2.4em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  user-select: none;
  color: #000;
  outline: none;
  border: 1px solid rgba(110,121,128,.8);
  border-top-color: rgba(0,0,0,.3);
  border-radius: 5px;
  background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
  box-shadow:
   0 -1px rgba(10,21,28,.9) inset,
   0 1px rgba(255,255,255,.5) inset;
}
a.dias-031:hover {
  background: linear-gradient(#d2dfea, #71828c);
}
a.dias-031:active {
  line-height: 2.6em;
  background: linear-gradient(#bac6cf, #c5d3de 20%, #71828c);
  box-shadow: 0 -1px rgba(255,255,255,.4) inset;
}
a.dias-031:before {
  content: "";
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(rgba(200,200,200,.5), rgba(240,240,240,.5));
}
===============================

кнопка-031
===============================

кнопка-032
===============================

1
===============================

1
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-035" tabindex="0"><span></span></a>
===========Код в CSS:==========
.dias-035 {
  position: relative;
  display: inline-block;
  border-radius: 100px;
  outline: none;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset, 0 1px 1px rgba(255,255,255,.2);
  background: #8a7b78 linear-gradient(#8a7b78, #cdcdcd);
}
.dias-035 span {
  position: relative;
  display: block;
  width: 50px;
  height: 100px;
  border: solid transparent;
  border-width: 0 0 0 50px;
  border-radius: 100px;
  outline: none;
  overflow: hidden;
}
.dias-035 span:before {
  content: "";
  position: absolute;
  left: -50px;
  height: 100px;
  border-right: 50px solid transparent;
  border-left: 50px solid #bfddf5;
  border-radius: 100px;
}
.dias-035:after {
  content: "\260e";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 300%;
  font-weight: 700;
  text-align: center;
  text-shadow: #2e7ebd 0 1px 2px;
  color: #fff;
  margin: auto;
  border-radius: 100px;
  background: #75a7cd linear-gradient(#75a7cd, #5084a8);
  box-shadow: 0 2px 2px rgba(255,255,255,.5) inset, 0 -2px 2px rgba(0,0,0,.3) inset, 0 0 2px 2px rgba(0,0,0,.3);
}
===============================

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

========Код кнопки для HTML=======
<a href="#" class="dias-036" tabindex="0"></a>
===========Код в CSS:==========
a.dias-036 {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 100%;
  outline: none;
  background: #ddd;
  box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
}
a.dias-036:after, a.dias-036:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7.5%;
  left: -15%;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 10%;
  margin: auto;
  background: #999;
  box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
a.dias-036:before {
  left: 15%;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
a.dias-036:hover, a.dias-036:focus {
  background: #e35d31;
  box-shadow: none;
}
a.dias-036:hover:after, a.dias-036:hover:before {
  background: #fff;
  box-shadow: none;
}
a.dias-036:focus {
  background-image:
   linear-gradient(120deg, transparent 45%, #e35d31 45%, #e35d31 55%, transparent 55%),
   radial-gradient(transparent 20%, #fff 20%, #fff 30%, transparent 30%);
  -webkit-animation: rotate31 1s linear infinite forwards;
  animation: rotate31 1s linear infinite forwards;
}
a.dias-036:focus:after, a.dias-036:focus:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-30% - 4px/2);
  left: 4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 8px solid #fff;
  border-bottom: 4px solid transparent;
  background: transparent;
  box-shadow: none;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
a.dias-036:focus:before {
  top: calc(30% + 4px/2);
  left: -4px;
  border-left: none;
  border-right: 8px solid #fff;
}
===============================

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

========Код кнопки для HTML=======
<a href="#" class="dias-037">кнопка-037</a>
===========Код в CSS:==========
a.dias-037, a.dias-037:before {
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 100px;
  border: solid rgb(4,88,192);
  border-width: 3px 10px;
  outline: none;
  opacity: 1;
  transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s;
} 
a.dias-037 {
  position: relative;
  padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px);
  border: 1px solid rgba(62,153,239,.5);
  background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%, rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%, rgb(44,135,232) 92%, #fff 97%, rgb(62,153,239) 99%) no-repeat;
}
a.dias-037:before {
  content:  "Текст CSS";
  position:  absolute; 
  bottom: -7px;
  left: -1px;
  width: calc(100% - (15px + 10px - 1px)*2);
  background: #fff linear-gradient(rgb(58,160,253), rgb(4,88,192) 60%, rgb(49,112,201));
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
a.dias-037:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
a.dias-037:hover:before {
  border-color: #0766d8;
  background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd);
}
a.dias-037:focus,
a.dias-037:active {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
  opacity: 0;
  visibility: hidden;
  transition: .4s;
}
===============================

кнопка-037

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

кнопка-038
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-039">Как у Google</a>
===========Код в CSS:==========
a.dias-038 {
  display: inline-block;
  color: red; /*Цвет рамки кнопки*/
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 2px solid;
  border-radius: 1px;
  transition: 0.2s;
} 
a.dias-038:hover { background: rgba(255,255,255,.2); }
a.dias-038:active { background: white; }
/*Кнопка dias-039*/
a.dias-039 {
  display: inline-block;
  font-family: arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: rgb(68,68,68);
  text-decoration: none;
  user-select: none;
  padding: .2em 1.2em;
  outline: none;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1);
  transition: all .218s ease 0s;
}
a.dias-039:hover {
  color: rgb(24,24,24);
  border: 1px solid rgb(198,198,198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
a.dias-039:active {
  color: rgb(51,51,51);
  border: 1px solid rgb(204,204,204);
  background: rgb(238,238,238) linear-gradient(rgb(238,238,238), rgb(224,224,224));
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
===============================

Как у Google
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-040">как у Mazila </a>
===========Код в CSS:==========
a.dias-040 {
  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-040: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-040: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;
}
===============================

как у Mazila
===============================

Скачать бесплатно первые 30 дней
===============================

кнопка-042
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-043">кнопка-043</a>
===========Код в CSS:==========
.dias-043 {
  text-decoration: none;
  display: inline-block;
  padding: 20px 30px;
  margin: 10px 20px;
  position: relative;
  color: red;
  border: 1px solid rgba(255, 255, 255, .4);
  background: none;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.dias-043:before, .dias-043:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  box-sizing: border-box;
}
.dias-043:before {
  bottom: 0;
  left: 0;
  border-left: 1px solid red;
  border-top: 1px solid red;
  transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;
}
.dias-043:after {
  top: 0;
  right: 0;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  transition: 0s ease opacity .4s, .2s ease width, .2s ease height .2s;
}
.dias-043:hover:before, 
.dias-043:hover:after {
  height: 100%;
  width: 100%;
  opacity: 1;
}
.dias-043:hover:before {
  transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;
}
.dias-043:hover:after {
  transition: 0s ease opacity .4s, .2s ease height .4s, .2s ease width .6s;
}
.dias-043:hover {
  background: rgba(255, 255, 255, .2);
}
===============================

кнопка-043
===============================

кнопка-044
===============================

кнопка-045
===============================

кнопка-046
===============================

кнопка-047
===============================

кнопка-048
===============================

кнопка-049
===============================

========Код кнопки для HTML=======
<a href="#" class="dias-050">кнопка-050</a>
===========Код в CSS:==========
.dias-050 {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 15px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #6c757d; 
	border-radius: 5px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #6c757d;
	background-color: #fff;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.dias-050:focus {
	box-shadow: 0 0 0 3px rgb(108 117 125 / 50%);
}
.dias-050:hover {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
.dias-050:active {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
.dias-050:disabled {
	pointer-events: none;
	opacity: 0.65;
}
 
.dias-050a {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 15px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #7952b3;  
	border-radius: 5px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: #7952b3;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.dias-050a:focus {
	box-shadow: 0 0 0 3px rgb(121 82 179 / 25%);
}
.dias-050a:hover {
	background-color: #61428f;
	border-color: #61428f;
}
.dias-050a:active {
	background-color: #61428f !important;
	border-color: #61428f !important;
}
.dias-050a:disabled {
	pointer-events: none;
	opacity: 0.65;
}
===============================

кнопка-050 dias-050-2
кнопка-050a1 dias-050a2
===============================
1 2