2 replies [Last post]
Zaaka72
Zaaka72's picture
Offline
newbie
UK
Last seen: 3 days 23 hours ago
UK
Joined: 2018-04-28
Posts: 4
Points: 6

Sad I have a css class setup for a button however I require all orange text and backgrounds to change on hover, can anyone help? asked in other forums but just got remarks on where i store the CSS, example is at https://teeseyed.online/testing/button.html

Zaaka72
Zaaka72's picture
Offline
newbie
UK
Last seen: 3 days 23 hours ago
UK
Joined: 2018-04-28
Posts: 4
Points: 6

OK here goes, it did not work before

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BUTTON TEST</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.lc-btn {
    width: 150px;
    height: 30px;
    lineheight: 30px;
    background-color: #2B2B2B;
    border: 2px solid #fc8006;
    border-radius: 20px;
    display: inline-block;
    font-size: 20px;
    overflow: hidden;
    padding: 0px;
}
a.lc-btn {
    color: #000;
    text-decoration: none;
}
a.lc-btn:hover {
    color: #fff;
    text-decoration: none;
    background-color: #110482;
    border: 2px solid #ffff00;
    cursor: pointer;
}
a.lc-btn i {
    background-color: #fc8006;
    color: #000;
    width: 30px;
    text-align: center;
    height: 30px;
    top: 0px;
    float: left;
    border-radius: 20px;
    line-height:30px;
    margin-top:-3px;
}
a.lc-btn span {
    background-color: transparent;
    color: #fc8006;
    width: 115px;
    text-align: center;
    height: 30px;
    top: 0px;
    float: right;
    line-height:30px;
    margin-top:-4px;
}
</style>
</head>
 
<body  data-bs-theme="dark" >
<div class="container"> <br>
  <a class="lc-btn"><i class="bi bi-eye"></i><span>View</span></a> 
    <a class="lc-btn"><i class="bi bi-map"></i><span>Map</span></a> 
    </div>
</body>
</html>

Example

Zaaka72
Zaaka72's picture
Offline
newbie
UK
Last seen: 3 days 23 hours ago
UK
Joined: 2018-04-28
Posts: 4
Points: 6

So no help here then either

So no help here then either Sad :(