Блог

Главная - Вопросы по программированию - Создать эффект кнопки без тега кнопки

Создать эффект кнопки без тега кнопки

#html #css #button

#HTML #css #кнопка

Вопрос:

Как сделать эффект границы кнопки, как на кнопке ниже, без обычного тега кнопки? Как сделать эффект границы кнопки, как на кнопке ниже, без обычного тега кнопки?Как сделать эффект границы кнопки, как на кнопке ниже, без обычного тега кнопки?Как сделать эффект границы кнопки, как на кнопке ниже, без обычного тега кнопки?

 span#mustBeEffectHowAsfromTypicalButton {
    background-color: red;
    padding: 6px;
    border-radius: 16px;
    background: rgb(89, 89, 89);
    background: -moz-linear-gradient(90deg, rgba(89, 89, 89, 1) 41%, rgba(182, 182, 182, 1) 42%);
    background: -webkit-linear-gradient(90deg, rgba(89, 89, 89, 1) 41%, rgba(182, 182, 182, 1) 42%);
    background: linear-gradient(352deg, rgba(189, 189, 189, 1) 51%, rgba(237, 237, 237, 1) 51%);
}

.myButton>span:nth-child(2) {
    padding-left: 12px;
}

.myButton:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    right: 4px;
    z-index: 1;
    width: calc(100% - 9px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
    border-radius: 16px;
}


.myButton {
    padding-bottom: 6px;
    padding-right: 6px;
    letter-spacing: 3px;
    -moz-transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease;
    font-family: RobotoCondensed-Light;
    position: relative;
    display: inline-block;
    background-color: orange;
    background-image: linear-gradient(orange, lightorange);
    border-radius: 16px;
    z-index: 3;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.myButton:hover {
    color: white;
    background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
    background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
    background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
    background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
    background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
    box-shadow: 1px 1px 10px 0px white;
    cursor: pointer;
}

span.myButton>span:nth-child(3) {
    position: relative;
    font-size: 210%;
    top: 5px;
    left: 1px;
    text-shadow: 0px 0px 0px #000000;
}

span.myButton:hover span#highlight {
    color: white;
}  
 <span id="mustBeEffectHowAsfromTypicalButton">
<span  class="myButton"  >
<span  id="highlight"> </span>
<span id="highlight">BUTTON use SPAN TAG</span>
<span id="highlight"></span>
</span>
</span>

<Br><Br>


<button class="myButton" style="height: 45px;">

<span  id="highlight"> </span>
<span id="highlight">BUTTON use BUTTON TAG</span>
<span id="highlight"></span>
</button>

кнопка, например

Ответ №1:

для этого можно использовать класс css

 .btn {
      background: #3B81F6;
      color: #fff;
      padding; 10px;
      border-radius: 6px;
      font-size: 20px;
  }

.btn:active {
   box-shadow: 0 3px 10px 0 rgba(28, 101, 201, 0.25);
}
or
.btn:hover {
   box-shadow: 0 3px 10px 0 rgba(28, 101, 201, 0.25);
}

Комментарии:

1. Вы предоставили обычный класс button, но, к сожалению, это не решение проблемы.