如何使用CSS设置添加到购物车<button>的样式？

Question

JSfiddle上面我需要的例子。

嘿伙计们，我在寻找解决这个小问题的方法时遇到了一些问题。我有一个添加到购物车按钮，我希望它的样式类似于我正在工作的网站上的许多其他按钮。我希望效果起作用，当然还要删除添加package com.jainsupplier; import android.app.ActivityManager; import android.app.Notification; import android.app.NotificationManager; import android.app.PendingIntent; import android.content.ComponentName; import android.content.ContentResolver; import android.content.Context; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.media.Ringtone; import android.media.RingtoneManager; import android.net.Uri; import android.os.Build; import android.support.v4.app.NotificationCompat; import android.text.Html; import android.text.TextUtils; import android.util.Patterns; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.List; public class NotificationUtils { private static String TAG = NotificationUtils.class.getSimpleName(); private Context mContext; public NotificationUtils(Context mContext) { this.mContext = mContext; } public void showNotificationMessage(String title, String message, String timeStamp, Intent intent) { showNotificationMessage(title, message, timeStamp, intent, null); } public void showNotificationMessage(final String title, final String message, final String timeStamp, Intent intent, String imageUrl) { // Check for empty push message if (TextUtils.isEmpty(message)) return; // notification icon final int icon = R.mipmap.ic_launcher; intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); final PendingIntent resultPendingIntent = PendingIntent.getActivity( mContext, 0, intent, PendingIntent.FLAG_CANCEL_CURRENT ); final NotificationCompat.Builder mBuilder = new NotificationCompat.Builder( mContext); final Uri alarmSound = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + mContext.getPackageName() + "/raw/notification"); if (!TextUtils.isEmpty(imageUrl)) { if (imageUrl != null && imageUrl.length() > 4 && Patterns.WEB_URL.matcher(imageUrl).matches()) { Bitmap bitmap = getBitmapFromURL(imageUrl); if (bitmap != null) { showBigNotification(bitmap, mBuilder, icon, title, message, timeStamp, resultPendingIntent, alarmSound); } else { showSmallNotification(mBuilder, icon, title, message, timeStamp, resultPendingIntent, alarmSound); } } } else { showSmallNotification(mBuilder, icon, title, message, timeStamp, resultPendingIntent, alarmSound); playNotificationSound(); } } private void showSmallNotification(NotificationCompat.Builder mBuilder, int icon, String title, String message, String timeStamp, PendingIntent resultPendingIntent, Uri alarmSound) { NotificationCompat.InboxStyle inboxStyle = new NotificationCompat.InboxStyle(); inboxStyle.addLine(message); Notification notification; notification = mBuilder.setSmallIcon(icon).setTicker(title).setWhen(0) .setAutoCancel(true) .setContentTitle(title) .setContentIntent(resultPendingIntent) .setSound(alarmSound) .setStyle(inboxStyle) .setWhen(getTimeMilliSec(timeStamp)) .setSmallIcon(R.mipmap.ic_launcher) .setLargeIcon(BitmapFactory.decodeResource(mContext.getResources(), icon)) .setContentText(message) .build(); NotificationManager notificationManager = (NotificationManager) mContext.getSystemService(Context.NOTIFICATION_SERVICE); notificationManager.notify(Config.NOTIFICATION_ID, notification); } private void showBigNotification(Bitmap bitmap, NotificationCompat.Builder mBuilder, int icon, String title, String message, String timeStamp, PendingIntent resultPendingIntent, Uri alarmSound) { NotificationCompat.BigPictureStyle bigPictureStyle = new NotificationCompat.BigPictureStyle(); bigPictureStyle.setBigContentTitle(title); bigPictureStyle.setSummaryText(Html.fromHtml(message).toString()); bigPictureStyle.bigPicture(bitmap); Notification notification; notification = mBuilder.setSmallIcon(icon).setTicker(title).setWhen(0) .setAutoCancel(true) .setContentTitle(title) .setContentIntent(resultPendingIntent) .setSound(alarmSound) .setStyle(bigPictureStyle) .setWhen(getTimeMilliSec(timeStamp)) .setSmallIcon(R.mipmap.ic_launcher) .setLargeIcon(BitmapFactory.decodeResource(mContext.getResources(), icon)) .setContentText(message) .build(); NotificationManager notificationManager = (NotificationManager) mContext.getSystemService(Context.NOTIFICATION_SERVICE); notificationManager.notify(Config.NOTIFICATION_ID_BIG_IMAGE, notification); } /** * Downloading push notification image before displaying it in * the notification tray */ public Bitmap getBitmapFromURL(String strURL) { try { URL url = new URL(strURL); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); connection.setDoInput(true); connection.connect(); InputStream input = connection.getInputStream(); Bitmap myBitmap = BitmapFactory.decodeStream(input); return myBitmap; } catch (IOException e) { e.printStackTrace(); return null; } } // Playing notification sound public void playNotificationSound() { try { Uri alarmSound = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + mContext.getPackageName() + "/raw/notification"); Ringtone r = RingtoneManager.getRingtone(mContext, alarmSound); r.play(); } catch (Exception e) { e.printStackTrace(); } } /** * Method checks if the app is in background or not */ public static boolean isAppIsInBackground(Context context) { boolean isInBackground = true; ActivityManager am = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE); if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT_WATCH) { List<ActivityManager.RunningAppProcessInfo> runningProcesses = am.getRunningAppProcesses(); for (ActivityManager.RunningAppProcessInfo processInfo : runningProcesses) { if (processInfo.importance == ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND) { for (String activeProcess : processInfo.pkgList) { if (activeProcess.equals(context.getPackageName())) { isInBackground = false; } } } } } else { List<ActivityManager.RunningTaskInfo> taskInfo = am.getRunningTasks(1); ComponentName componentInfo = taskInfo.get(0).topActivity; if (componentInfo.getPackageName().equals(context.getPackageName())) { isInBackground = false; } } return isInBackground; } // Clears notification tray messages public static void clearNotifications(Context context) { NotificationManager notificationManager = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE); notificationManager.cancelAll(); } public static long getTimeMilliSec(String timeStamp) { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { Date date = format.parse(timeStamp); return date.getTime(); } catch (ParseException e) { e.printStackTrace(); } return 0; } } 会自动拥有的基本视觉效果。这种性质有一些相似的主题，但我无法根据他们的建议找到解决方案。

<button>

.main_btn_m {
  float: right;
  display: block;
  text-decoration: none;
  background: #2f5289;
  color: #eeeeee;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 8px 40px;
  font-family: Arial, Helvetica, sans-serif;
  transition: .7s;
  letter-spacing: 1px;
}
.main_btn_m span {
  float: left;
}
.main_btn_m:hover {
  background: #2c3339;
  color: #ffffff;
  transition: .7s;
  cursor: pointer;
}
.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left_m:hover:before,
.hvr-underline-from-left_m:focus:before,
.hvr-underline-from-left_m:active:before {
  right: 0;
}

Answer 1

问题是 ADD TO CART 链接包含在button元素中。只需将此按钮样式添加到CSS中即可。

button {
    background: transparent;
    border: none;
    padding: 0px;
}

显然，您可能需要一个更具体的选择器，具体取决于您的整体CSS。

值得一提的是，@ Quentin表示这不是有效的HTML5结构。如Mozilla Docs

中所述

允许的内容 Phrasing content，定义为：

  

短语内容定义文本及其包含的标记。运行   短语内容构成段落。

Answer 2

没有将class属性应用于按钮内的链接，将其应用于按钮本身

<a class="main_btn_m hvr-underline-from-left_m" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" 
style="width: 250px; float: left; margin-bottom: 50px;">basic btn that works

</a>

<!-- bottom btn is what I am trying to accomplish, an add to cart btn that works with the right styling -->
<button onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" class="main_btn_m hvr-underline-from-left_m" style="width: 250px; float: left;">
<a>add to cart                      <!-- need to get rid of styling while keeping the same style as 'basic btn that works' -->              
</a>

</button>


<!-- original working code 
<button class="form-button btn-pro addcart_view" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"> 
</button>   
-------------------------------------------->

<style>

.main_btn_m {
    float          : right;
    display        : block;
    text-decoration: none;
    background     : #2f5289;
    color: #eeeeee;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 8px 40px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .7s;
    letter-spacing: 1px;
}

.main_btn_m span {
    float: left; 
}

.main_btn_m:hover {
    background: #2c3339;
    color: #ffffff;
    transition: .7s;
    cursor: pointer;
}

.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-left_m:hover:before, .hvr-underline-from-left_m:focus:before, .hvr-underline-from-left_m:active:before {
  right: 0;
}
</style>

试试我已修复的代码

Answer 3

<a class="main_btn_m hvr-underline-from-left_m" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" 
style="width: 250px; float: left; margin-bottom: 50px;">basic btn that works

</a>

<!-- bottom btn is what I am trying to accomplish, an add to cart btn that works with the right styling -->
<button onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" class="main_btn_m hvr-underline-from-left_m" style="width: 250px; float: left;">
<a>add to cart                      <!-- need to get rid of styling while keeping the same style as 'basic btn that works' -->              
</a>

</button>


<!-- original working code 
<button class="form-button btn-pro addcart_view" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"> 
</button>   
-------------------------------------------->

<style>

.main_btn_m {
    float          : right;
    display        : block;
    text-decoration: none;
    background     : #2f5289;
    color: #eeeeee;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 8px 40px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .7s;
    letter-spacing: 1px;
}

.main_btn_m span {
    float: left; 
}

.main_btn_m:hover {
    background: #2c3339;
    color: #ffffff;
    transition: .7s;
    cursor: pointer;
}

.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-left_m:hover:before, .hvr-underline-from-left_m:focus:before, .hvr-underline-from-left_m:active:before {
  right: 0;
}
</style>