Как убрать рамку/тень у кнопки?

Question

Придал кнопке немного объема, но мешает эта тень(или рамка).
Как её можно убрать?
Использую Firefox

button{
        outline: none;
        background: none;
        cursor: pointer;
}

.category-product-name{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 58px;
    margin-top: 20px;
    border-radius: 100px;
    cursor: pointer;
}

Answer 1

Пропишите border: none:

button{
  outline: none;
  background: none;
  cursor: pointer;
  border: none;
}

.category-product-name{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 58px;
  margin-top: 20px;
  border-radius: 100px;
  cursor: pointer;
}

<button class="category-product-name">Пример 2</button>

Либо же задайте свой:

button{
  outline: none;
  background: none;
  cursor: pointer;
  border: 2px solid #ff0000;
}

.category-product-name{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 58px;
  margin-top: 20px;
  border-radius: 100px;
  cursor: pointer;
}

<button class="category-product-name">Пример 2</button>

Answer 2

Для придания объема кнопке без использования рамок, попробуйте применить фильтры SVG.

.button {
filter:url(#filterUp);
fill:#919191;
stroke:#919191;
stroke-width:2;
cursor: pointer;
} 

text {
font-size:18px;
text-anchor:middle;
fill:#808080;

}

<svg xmlns="http://www.w3.org/2000/svg" width="40vw" viewBox="0 0 240 100">
  <defs>
    <filter id="filterUp">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
      <feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
         <feDistantLight azimuth="225" elevation="45"/> 
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="result"/>
      <feComposite operator="atop" in2="SourceGraphic"/>
    </filter>
   
 </defs>
	<rect id="back" width="100%" height="100%" fill="#d3d3d3" />
    <rect class="button"   x="20" y="20" rx="25" ry="25" width="210" height="50"  /> 
	 <text x="50%" y="50%" > Пример 2 </text>
</svg>

Для создания эффекта нажатия кнопки, можно использовать два набора фильтров

.button {
filter:url(#filterUp);
fill:#919191;
stroke:#919191;
stroke-width:2;
}
.button:hover {
filter:url(#filterDown);
fill:#919191;
stroke:#888888;
} 

text {
font-size:20px;
font-weight:500;
text-anchor:middle;
fill:#5C5C5C;

} 

.button:hover ~ text {
fill:crimson;
font-size:24px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="40vw" viewBox="0 0 240 100">
  <defs>
    <filter id="filterUp">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
      <feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
         <feDistantLight azimuth="225" elevation="45"/> 
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="result"/>
      <feComposite operator="atop" in2="SourceGraphic"/>
    </filter>

    <filter id="filterDown">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
      <feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
         <feDistantLight azimuth="225" elevation="145"/> 
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1" k2="1" k3="1" k4="0" result="result"/>
      <feComposite operator="atop" in2="SourceGraphic"/>
    </filter>
 
 </defs>
 
 <rect id="back" width="100%" height="100%" fill="#d3d3d3" />
    <rect class="button"   x="20" y="20" rx="25" ry="25" width="210" height="50"  /> 
	 <text x="50%" y="50%" > Пример 2 </text>
   </svg>

БЛОГ НА HUSL

Как убрать рамку/тень у кнопки?

Ответы (2 шт):