У меня проблемы с изготовлением кнопок - PullRequest
Новая
       9

У меня проблемы с изготовлением кнопок

0 голосов
/ 02 апреля 2019

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

Я хочу сделать: (https://pasteboard.co/I8gudAg.png)

Я сделал: 

.btnc-secondary {
    font-size: 18px;
    padding: 10px 30px;
    background: #f93140;
    border-style: solid;
    border-width: 1px;
    outline-offset: -6px;
    outline: 1px solid #ffffff;
    border-radius: 0;
    position: relative;
    color: #ffffff;
}
.btnc-secondary:hover:after,
.btnc-secondary.active:after {
    transition-delay: 0.2s;
    transition: all 0.2s linear;
    border-image-source: linear-gradient(98deg, #f93140, #f50a68);
}

.btnc-secondary[disabled] {
    background: #ededed;
    border: 1px solid #a0a0a0 !important;
    outline-color: #3f3f3f;
    color: #3d3d3d;
  
}

.btnc-secondary:active:after,
.btnc-secondary:active:before,
.btnc-secondary:after,
.btnc-secondary:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 50%;
    border-left: 1px solid #ff8a93;
    border-top: 1px solid #ff8a93;
    margin: 4px;
    transition: all 0.2s linear;
}

.btnc-secondary:hover,
.btnc-secondary.active {
    background: #ffffff;
    outline-color: #f50a68;
    color: #f93140;
    transition: all 0.2s linear;
}

.btnc-secondary.active {
    transition: all 0.2s linear;
    background-image: -webkit-linear-gradient(6deg, #c20101, #bc070e) !important;
    background-image: -o-linear-gradient(6deg, #c20101, #bc070e) !important;
    background-image: linear-gradient(84deg, #c20101, #bc070e) !important;
}

.btnc-secondary:active {
    background: #ff0013;
    outline-color: #ffffff !important;
    color: #ffffff;
    transition: all 0.2s linear;
}
<br><br><br><br>


<a class="btn btnc-secondary btn-sm fs-14 font-opensans" href="#">Title</a>

1 Ответ

1 голос
/ 02 апреля 2019

Пример, который вы приводите в комментарии, некорректен, так как он использует div внутри элемента SVG.

Далее следует мой пример.Это элемент svg, который будет принимать ширину родительского элемента.Если вы предпочитаете, вы можете дать svg фиксированную ширину.

Анимация занимает 3 секунды, но вы можете изменить ее на нужную, изменив значение на --t

Я использую hsl цветов и меняю яркость наизмените цвет.

Я надеюсь, что это то, что вы спрашивали.

body{--t:3s}/*time*/

rect{stroke:hsl(254,57%,55%);}


svg{background:hsl(254,57%,95%);
  transition:all var(--t) ease;
  font-family:Arial;
  
}
text{text-anchor:middle;
  pointer-events:none;
  fill:hsl(254,57%,45%);
  transition:all var(--t) ease-in-out; 
}


.shape{
  fill:none;
  stroke:hsl(254,57%,45%);
  stroke-dasharray:95px;
  stroke-dashoffset:95px;
  transition:all var(--t) ease;  
}

/*HOVER*/

svg:hover{background:hsl(254,57%,55%)}

svg:hover .shape{
  stroke:hsl(254,57%,75%);
  stroke-dasharray:380px;
  stroke-dashoffset:0px;
}

svg:hover text{fill:hsl(254,57%,95%)}
 <a href="">
 <svg viewBox="-5 -5 160 50" >
   <rect  height="40" width="150" fill="none" stroke-width=".5"  />
   <path class="shape" d="M60,0L150,0 150,40 0,40 0,0 60,0"  />
   <text x="75" y="25" >Button 1</text>
</svg></a>
...