CSS-Buttons-Mania/1. Subscribe Button.html at master · jessemarco/CSS-Buttons-Mania · 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
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto|Oswald" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="demo.css">

    <title>Online Influencer | Subscribe Button</title>


      <style media="screen">

      	/*background color of subscribe button*/
      	/*#ff0000*/
      	/*font color subscribe button*/
      	/*#ffdfcf*/

		/*   width: 146px;
      		height: 37px;
      	*/

      	/*font color of subscribed button*/
      	/*#6a6a6a*/
      	/*background subscribed button*/
      	/*#eeeeee*/

      	button {
      		font-family: "Roboto", sans-serif;
      		font-weight: bold;
      		font-size: 16px;
      		letter-spacing: 0.5px;
      		width: 146px;
      		height: 37px;
      		border-radius: 3px;
      		text-transform: uppercase;
      		border: none;
      		cursor: pointer;
      		outline: none;
      		background: #ff0000;
      		color: #ffdfcf;
      	}

      	.subscribed {
      		background: #eeeeee;
      		color: #6a6a6a;
      	}


		button::-moz-focus-inner {
			border: 0;
		}


      </style>


  </head>
  <body>
  	<div class="wrapper">
  	<div class="title">Online Influencer</div>

		<button>subscribe</button>

  	</div>
  	<!-- wrapper -->


  	<script type="text/javascript">

  	    var btn = document.querySelector('button');
	      btn.addEventListener('click', toggle);

  	    function toggle() {
  	      if (btn.textContent === 'subscribe') {
  	      	btn.setAttribute("class","subscribed");
  	        btn.textContent = 'subscribed';
  	      } else {
  	      	btn.removeAttribute("class","subscribed");
  	        btn.textContent = 'subscribe';
  	      }
	    }

  	</script>

  </body>
</html>