如何使用css添加到购物车按钮看起来像这个图像？

Question

我必须在产品页面上编辑添加到购物车按钮，使其看起来像下面的图像（绿色按钮（它实际上只是一个图像）相同的颜色，字体大小，黑色文本轮廓和桌面上的不同大小和移动（响应））。如果它在移动设备上的“添加到购物车”按钮图像（绿色）图像的任何大小都是全宽（100％），而在桌面上则是56％左右。我想出了如何用css改变颜色，按钮尺寸（但在移动设备上看起来很糟糕），但是关于它......

如何在桌面上添加到购物车按钮（如绿色按钮）：

它应该如何在手机上显示（绿色按钮，响应全宽）：

Answer 1

你必须改变当前按钮的CSS。

在CSS中添加：

button.single_add_to_cart_button.button.alt {
background-image: url('http://veleran.com/wp-content/uploads/2018/04/AddToCartButton.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 200px;
border: 0px; }

之后删除当前按钮中的文本Add to cart，它应该没问题。

Answer 2

尝试在您的css上写这个（在底部）根据需要调整值

@media screen and (max-width:767px){
.quantity+.button {
    margin-right: 0;
    width: 100%;
    font-size: 45px;
    -webkit-text-stroke: 2px #000;
    font-weight: 700;
    padding: 18px;
    line-height: 45px;
    min-height: 60px;
    text-shadow: 2px 2px #928282;
    background: #37ae33;
}
}

例如，

＆＃13;

＆＃13;

.button {
    margin-right: 0;
    width: 100%;
    font-size: 45px;
    -webkit-text-stroke: 2px #000;
    font-weight: 700;
    padding: 18px;
    line-height: 45px;
    /* height: 50px; */
    min-height: 60px;
    text-shadow: 2px 2px #928282;
    background: #37ae33;
text-align:center;color:#fff;}

＆＃13;

<div class="button">Add To Cart</div>

＆＃13;

＆＃13;

＆＃13;

删除图片

Answer 3

按照以下方式思考：

wscript "MyScript.vbs" "%1"

阴影不太完美，也认为你可能需要一个：nthchild（1）所以＆＃39;写一篇评论＆＃39;文字也没有受到影响。