主页 / 问题 / 1353518
Accepted
Demon __
Asked:2022-04-24 21:22:25 +0800 CST2022-04-24 21:22:25 +0800 CST

如何制作漫画书按钮

  • 772

该按钮应如下所示：

在此处输入图像描述

我得到这样的东西。skew但我不知道如何添加到阴影

html {
  text-align: center;
}

.heroes {
  background: #fff;
  border: 2px solid #000;
  transform: skewX(-25deg);
  padding: 10px 10px;
  text-transform: uppercase;
  font-weight: bold;
   box-shadow: -4px 3px 1px 1px rgb(0,0,0, 1);
}
<button class="heroes">Создана для ИТ-героев</button>

css

2 个回答

  1. Best Answer

    按钮，SVG CSS3悬停动画制作的背景

    字体和悬停角度可以根据您的喜好轻松定制

    #gr1 {
 transform-origin: right center;
 transition:transform 0.5s;
 }
 #gr1:hover {
 transform:skewY(3deg);
  }
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 434 138">

                                   <!-- Фон   -->
<path class="p1" d="M0 .6h161.8v138.9H0Z" id="path839" fill="#064787" stroke="#000" stroke-width="1" />
  <path d="M169.2.6H436v138.9H169.2Z" id="path841" fill="#1B5B77" stroke="#000" stroke-width="1" />
                                <!-- Тень -->
  <path d="m336.4 97.1-298.9 7.1 19.1-46.9 291.2-1.5Z" id="path837" fill="#000" stroke="#000" stroke-width="1" />      
 <g id="gr1">                    <!-- Кнопка -->
    <path id="btn" d="M54.1 37.2h299.3l-17 60H33z" id="path835" fill="white" stroke="#000" stroke-width="1" />
     <text x="50" y="74" font-size="30px" fill="black" > Создана для IT героев </text> 
 </g>
</svg>

    按下按钮并在按下时更改其颜色的选项

    为此，您只需要
    在初始状态下交换转换skewY(3deg);
    On hover -skewY(0deg);

    #gr1 {
 transform-origin: right center;
 transform:skewY(3deg);
 transition:transform 0.5s;
 }
 #gr1:hover {
 transform:skewY(0deg);
 } 
  #gr1:hover #btn {
  fill:yellowgreen;
   transition:fill 0.5s;
 
  }
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 434 138">

                                   <!-- Фон   -->
<path d="M0 .6h161.8v138.9H0Z" id="path839" fill="#064787" stroke="#000" stroke-width="1" />
  <path d="M169.2.6H436v138.9H169.2Z" id="path841" fill="#1B5B77" stroke="#000" stroke-width="1" />
                                <!-- Тень -->
  <path d="m336.4 97.1-298.9 7.1 19.1-46.9 291.2-1.5Z" id="path837" fill="#000" stroke="#000" stroke-width="1" />      
 <g id="gr1">                    <!-- Кнопка -->
    <path id="btn" d="M54.1 37.2h299.3l-17 60H33z" id="path835" fill="white" stroke="#000" stroke-width="1" />
     <text x="50" y="74" font-size="30px" fill="black" > Создана для IT героев </text> 
 </g>
</svg>

    • 4

  2. 也许带有处理程序的div中的按钮会消失

    let dl = document.getElementById('downLayer');
let ul = document.getElementById('upperLayer');
dl.addEventListener('click', pushButton)
function pushButton(e){
 console.log("ИТ-герой!");
}
    body{
background: #055590;
}
#downLayer {
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  width: 200px;
  height: 50px;
  background: #fff;
  transition: .1s;
  transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(-14deg) skewY(-2deg);
  cursor: pointer;
}
#downLayer:before {
  position: absolute;
  margin-top: -9px;
  margin-left: -2px;
  content: "";
  width: 190px;
  height: inherit;
  background: rgba(0,0,0, .45);
  transition: .1s;
  transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(-1deg) skewY(-4deg);
  z-index: -1; 
}
#upperLayer {  
   font: italic small-caps bold 16px/2 cursive;
   margin: 0 auto;
   width: 200px;
   height: 50px;
   background: #FFFFFF;
   text-align:center;
   line-height: 50px;
   color: black;
   border: 2px solid black;
   transition: .1s;
   font-size: 17px;
   font-weight: bold;
   text-shadow: 0px 0px 2px rgba(0,0,0,.7);
   box-shadow: 0px 0px 70px rgba(0,0,0,.4);
   user-select: none;
}

#downLayer:hover #upperLayer{
  box-shadow: 0px 0px 60px rgba(57,156,175, 1);
}
#downLayer:active:before {
  transform: rotate(0deg) translateX(10px) translateY(11px) skewX(-14deg) skewY(-2deg);
}
#downLayer:active {
  transform: rotate(0deg) translateX(10px) translateY(17px) skewX(-14deg) skewY(-2deg);
}
    <div id="downLayer">
<div id="upperLayer">Создана для ИТ героев</div>
</div>

    • 3

相关问题