CSS. Подбор вариантов фона с градиентом для кнопок главного меню Protostar Joomla

Здесь с десяток примеров кнопок. Я в итоге остановился на горизонтальном градиенте... Надеюсь, что этот черновик облегчит мне посторные процедуры подбороа фонов для кнопок или меню.

In [9]:

%%html
<style>

.grad1 {
  width: 58px;
  height: 30px;
  background-size: 100%;
  background-repeat:no-repeat;
  background-image: linear-gradient(to top, 
                    #febb3c 0%,#FA060B 33%, #FA060B 66%, #febb3c 100%);
);
  
}
</style>
<div class="grad1"></div>

In [64]:

%%html
<style>

.grad2{
    //border: solid 1px;
    border-radius: 5px;
  width: 58px;
  height: 30px;
  background-size: 1500% ;
  background-repeat:no-repeat;
  background-position: -390px -255px;
  background-image:   url('http://cl72410.tmweb.ru/jm_34_trado/images/banners/104443728_ULTIME_Tentation.jpg');
   
}
</style>

<div class="grad2"></div>

In [21]:

%%html
<style>

.grad3{
    
  width: 58px;
  height: 30px;  
  background-size: 100%;
  background-repeat:no-repeat;  
  
  background-image: linear-gradient(to top, rgba(143,209,243,0) 5%, 
                                            rgba(38,83,125,0.5), 
                                            rgba(143,209,243,0) 95%)
   
}
</style>

<div class="grad3"></div>

In [11]:

%%html
<style>

.grad4 {
  width: 58px;
  height: 30px;
  background-size: 100%;
  background-repeat:no-repeat;
 background-image: linear-gradient(to top, 
                    rgba(38,83,125,0.1), rgba(143,209,243,0.9));
);
  
}
</style>
<div class="grad4"></div>

In [13]:

%%html
<style>

.grad5 {
  width: 58px;
  height: 30px;
  background-size: 100%;
  background-repeat:no-repeat;
 background-image: linear-gradient(to top, 
                    rgba(38,83,125,0), rgba(143,209,243,0.9), rgba(143,209,243,0));
);
  
}
</style>
<div class="grad5"></div>

In [23]:

%%html
<style>

.grad6 {
  width: 58px;
  height: 30px;
  background-size: 100%;
  background-repeat:no-repeat;
 background-image: linear-gradient(to top, 
    rgba(143,209,243,0) 5%, 
    rgba(38,83,125,0.5) 20%,
    rgba(38,83,125,0.5) 80%,                               
    rgba(143,209,243,0) 95%
);
  
}
</style>
<div class="grad6"></div>

In [14]:

%%html
<style>

.grad7 {
  width: 58px;
  height: 30px;
  background-size: 100%;
  background-repeat:no-repeat;
background-image: linear-gradient(to right, 
    
    rgba(38,83,125,0.6),
    rgba(143,209,243,0.2)
    );
  
}
</style>
<div class="grad7"></div>

Посты чуть ниже также могут вас заинтересовать