te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to change text color in button - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to change text color in button - Stack Overflow

    javascript - How to change text color in button - Stack Overflow

    programmeradmin3浏览0评论

    I want to change the button text for 'New Service Request' to white. Please advise.

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info:hover{

background: #003366;

transition: 0.5s background;}
    <button class="btn-info"> <a href="LINK">New Service Request</a></button>

    I want to change the button text for 'New Service Request' to white. Please advise.

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info:hover{

background: #003366;

transition: 0.5s background;}
    <button class="btn-info"> <a href="LINK">New Service Request</a></button>

    • javascript
    • html
    • css
    Share Improve this question edited Dec 6, 2019 at 3:54 Au Nguyen 6694 silver badges12 bronze badges asked Dec 6, 2019 at 2:52 KimKim 5585 silver badges13 bronze badges 4
    • 1 Do you want change text color white when mouse hover? – Au Nguyen Commented Dec 6, 2019 at 2:54
    • 2 Does this answer your question? How to set text color in submit button? – Chandrashekhar Komati Commented Dec 6, 2019 at 3:26
    • 1 @chandu.komati I don't think that's related as their issue that it is a button with an a nested within it. Targetting the button with CSS won't modify the font-color as per the linked example. The only answer is to target the a within the button using CSS. – EGC Commented Dec 6, 2019 at 3:27
    • 1 your HTML is invalid, a cannot be inside a button element – Temani Afif Commented Dec 6, 2019 at 8:28
    Add a ment  | 

    7 Answers 7

    Reset to default 3

    You need to set the color of the a tag within the button to white.

    Example:

    .btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
}

.btn-info a {
  color: white;
}
    <button class="btn-info"> <a href="LINK">New Service Request</a></button>

    You simply need to target .button-info a to change the color of your text to white.

    <style>

.btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info a, .btn-info:hover {
  color: white;
}

.btn-info:hover{

background: #003366;

transition: 0.5s background;}

</style>

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

    It's worth noting too that your HTML is invalid, the nested structure <button><a></a></button> is not accepted, and can be checked by a Markup Validation Service. See the error below:

    Error: The element a must not appear as a descendant of the button element.

    A valid and more succinct version of your code is as follows:

    <style>
  .btn-info {
    background: #0066cc;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    padding: 10px 20px;
    color: white;
  }
  
  .btn-info:hover {
    background: #003366;
    transition: 0.5s background;
    cursor: pointer;
  }

</style>

<input type="button" class="btn-info" onclick="location.href='http://google.';" value="Google" />

    Change your class button-info to white You can do something like this. Hope it helps

    .btn-info { 
background: #0066cc; 
border: none; 
border-radius: 5px; 
font-size: 14px; 
padding: 10px 10px; }

.btn-info a {
  color: #fff;
  text-decoration: none;
}

.btn-info:hover{
background-color: #003366;
}
    <button class="btn-info"> <a href="LINK">New Service Request</a></button>

    Remove the a tag altogether, and give the hover state of the button a rule of cursor: pointer:

    .btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
  color: #fff;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
  cursor: pointer;
}
    <button class="btn-info">New Service Request</button>

    try this one 

    .btn-info
{
    font-size: 13px;
    color:green;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

    You should target the inside .button-info class to change the color of your text.

    try this code: 

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

    .btn-info:hover{
    color: #fff;
    background: #003366; 

    transition: 0.5s background;}



    <button class="btn-info" href="LINK">New Service Request</button>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论