Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Module:ArticleButton/styles.css: Difference between revisions

From Ved's Trolleybuses Place Wiki
Created page with ".button-with-circle { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; text-decoration: none; font-size: 14px; color: #333; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .button-with-circle:hover { background-color: #e0e0e0; color: #000; } .button-with-circle .circle-image { width: 32px; height: 32px; ba..."
 
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 3: Line 3:
     align-items: center;
     align-items: center;
     padding: 8px 16px;
     padding: 8px 16px;
    border: 1px solid #ccc;
     border-radius: 8px;
     border-radius: 8px;
     background-color: #f9f9f9;
     background-color: #121212;
    border: 1px solid #444;
    color: #fff;
     text-decoration: none;
     text-decoration: none;
     font-size: 14px;
     font-size: 14px;
    color: #333;
     cursor: pointer;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
     transition: background-color 0.3s, color 0.3s;
    width: 100%;
}
}


.button-with-circle:hover {
.button-with-circle:hover {
     background-color: #e0e0e0;
     background: #1e1e1e;
     color: #000;
     color: #fff;
}
}


.button-with-circle .circle-image {
.circle-image img {
     width: 32px;
     width: 32px;
     height: 32px;
     height: 32px;
Line 25: Line 26:
     border-radius: 50%;
     border-radius: 50%;
     margin-right: 8px;
     margin-right: 8px;
    object-fit: cover;
}
}
.circle-image a { color: #fff; }

Latest revision as of 19:15, 16 December 2024

.button-with-circle {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #121212;
    border: 1px solid #444;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: 100%;
}

.button-with-circle:hover {
    background: #1e1e1e;
    color: #fff;
}

.circle-image img {
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

.circle-image a { color: #fff; }