Убрать линию
 

Всем привет! Все прочитал в интернете об составляющих этого кода:

<style>


a.button14 {

display: inline-block;
text-shadow: 1px 1px #fff;
text-decoration: none;
padding: .3em 1em;
border: 1px solid #aaa;
border-radius: 100px;
outline: none;
background: #d6dbbf no-repeat;
background-image:
linear-gradient(to left, #aaa, #aaa),
linear-gradient(to left, #feffe8, #feffe8),
linear-gradient(#feffe8, #d6dbbf);
background-position: calc(100% - 2.7em) 0, calc(100% - 2.7em + 1px) 0, 0 0;
background-size: 1px 100%, 1px 100%, auto auto;
overflow: hidden;
}


</style>


<a href="#" class="button14">Скачать</a>


но что там линию вертикальную рисует не понял, надо убрать линию. Убрать могу, но боюсь что код не правильно поведет себя в будущем, подскажите что рисует эту линию. К сожалению не силен в ccs.

Это я знаю, но где написано что эта строка рисует линию? Я про эту строку читал что она другое делает.

Впринципе можно и так.

background-position: 50% 0, calc(50% + 1px) 0, 0;

Перед тем, как показать, где эти полоски, я хотел бы воспользоваться cокращённой записью background, по моему так наглядней получается.

background: 
	linear-gradient(#aaa, #aaa) 50% 0 / 1px 100% no-repeat,
	linear-gradient(#feffe8, #feffe8) calc(50% + 1px) 0 / 1px 100% no-repeat,
	linear-gradient(#feffe8, #d6dbbf) 0 / auto;

У серой полоски(первое из трех), обратите внимание на no-repeat, именно оно предотвращает сплошную заливку.
Почему linear-gradient(#aaa, #aaa), а не просто #aaa? Градиент относится к свойству background-image и соотвественно его можно также, как и картинку позиционировать(числа перед знаком /) и менять размеры(числа после /)
Просто #aaa залил бы весь фон. Вторая полос... Стоп! Их можно ведь объединить в одну, и градиенты это позволяют. Я думаю теперь вы сами поймёте, где полоска.

background: 
	linear-gradient(to right, #aaa 1px, #feffe8 0) 50% 0 / 2px 100% no-repeat,
	linear-gradient(#feffe8, #d6dbbf) 0 / auto;