html-css-course/buttons.html at main · shirha20/html-css-course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<style>
    .subscribe-button {
        background-color: rgba(214, 21, 21, 0.955);
        color:white;
        border : none;
        height :35px;
        width:105px;
        border-radius:4px;
        cursor:pointer;
        margin-right:8px;
        transition:opacity 0.15s,color 0.15s;
        margin-left: 110px;

    }

    .subscribe-button:hover{
        opacity:0.7

    }
    .subscribe-button:active{
        background-color: green;
    }

    .join-button{
        background-color:white;
        color:black;
        border-color:rgb(18, 18, 27);

        border-radius:4px;
        cursor:pointer;
        transition:opacity 0.15s,color 1s;
        padding-top:10px;
        padding-bottom:10px;
        padding-left:20px;
        padding-right:20px;
    }

    .join-button:hover{
        background-color:rgb(18, 18, 27);
        color:white;
    }

    .join-button:active{
        opacity:0.7;
    }
    .tweet-button{
        background-color:blue;
        color:white;
        border:none;
        border-radius:20px;
        height:35px;
        width:85px;
        font-weight:bold;
        font-size:15px;
        cursor:pointer;
        margin-left:8px;

    }
   .tweet-button:hover{
    box-shadow:10px 5px 50px black;
   }

</style>


<button class="subscribe-button">
    SUBSCRIBE
</button>
<button class="join-button">
    JOIN
</button>
<button class = "tweet-button">
    Tweet
</button>