CSS Tutorial: Styling Links & Buttons | Web Development Tutorials #22
CSS Tutorial: Styling Links & Buttons | Web Development Tutorials #22
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0 -> In last video we saw margin, padding, box model and many things
3.797 -> We saw float property. In today's video, I'll tell you
7.692 -> That how you can do designing of a button
10.884 -> And what are pseudo selector in CSS
13.314 -> So let's start quickly
15.314 -> Here I have created a file named Tut22.HTML
18.838 -> And without wasting time I will quickly add HTML boilerplate
22.42 -> And I will write your pseudo selectors and more designing
29.773 -> And after doing this I will add a style inside head
37.325 -> I will write all the styling in it and with that
42.391 -> I will write some markup let's see what that will be
46.989 -> First of all I will make a div here
50 -> With class="container" and ID="cont1"
55.125 -> I created this now what I will do will add a heading
58.961 -> H3 in it and will write this is my heading in it.
62.895 -> And with that I will add paragraph and write lorem
68.177 -> 34 and lets see how it looks.
72.423 -> Started live server and it is looking like this.
74.521 -> There is nothing much special done here
76.326 -> Let's add some styling in it. First will add in container
81.686 -> Will write .container as container is a class
85.463 -> First of all, Border: 2px solid red;
90.784 -> And background-colour let's add something greenish
97.277 -> Let's add this, anything and save.
102.754 -> Padding: 34px with that margin: 34px
108.153 -> Did this and it is looking something like this
111.735 -> With that will give it width: 666px;
119.342 -> It came like this and will make its margin: auto;
122.573 -> Gave this in y and saved
126.781 -> And it came in Centre. I did a bit of Designing in it.
132.435 -> Now suppose I want to add a button
134.474 -> in which I want to write read more
137.509 -> You might have seen button like this
139.893 -> so first of all I will add a link and write read more
143.651 -> and will give it a class="btn"
147.976 -> With that I will add a button and give class="btn"
151.988 -> So, button .btn and here read more.
156.625 -> Read more or contact us
161.309 -> This are two buttons with class="btn"
165.106 -> Read more is looking like this,
166.462 -> contact us is looking like a button
168.11 -> Both are looking different so we will go in style
172.787 -> And will add some styling in our btn class
178.675 -> And we will add what let me show you
181.007 -> first of all we will add background in btn
186.934 -> Let's give its background any colour
190.497 -> Let's give this one then we will fix it
195 -> you can see both have colour in background
197.664 -> Now let's add padding: 6px;
201.676 -> It will give padding of 6px from inside looking like a button
205.434 -> Now button has a border but a doesn't have
208.958 -> So I will make something like both don't have any border
212.072 -> So will make border: none;
215.762 -> By making border: none; border will be gone.
221.122 -> I wrote read more and contact us
223.669 -> What more can I do for a styling let me show you one thing
229.615 -> When I take my cursor here it showed me like a cursor
232.944 -> but not here it didn't came as cursor.
235.432 -> So I will use cursor property and make it pointer.
243.566 -> And now you can see I made both consistent
247.598 -> I added cursor pointer with that I can add more things like
252.685 -> I can change font-size: 18px;
258.28 -> Saved and you can see it increased a little
261.804 -> 18px is quite bigger I can make it smaller
264.742 -> Let's keep it 13px it is good.
268.578 -> Both small buttons are looking nice and they are consistent
274.524 -> Now I will add border-radius: 4px; here
284.436 -> Save it and border pixel has come.
287.276 -> I have made it almost consistent except one thing that
291.737 -> Hyperlink has underline and it doesn't
297.292 -> So how I will fix it I will write some CSS in my a.
304.195 -> It is known as text-decoration property
306.195 -> Making text-decoration: none; underline will be removed
310.129 -> Let's see what are pseudo selectors
312.851 -> If I hover over a
315.242 -> So, I'll write a:hover means whenever you take pointer on it
320 -> what should happen? Suppose I want to make its colour green.
324.052 -> That whenever I hover it should change to Green as you see.
329.178 -> Which I don't want I want its colour to be black
335.3 -> Maybe give it kind of reddish shade
340.25 -> Show that there will be some movement as I take Arrow there
343.383 -> with that will make its colour is black
350.345 -> So that both button look same. I take arrow
353.204 -> and it showed little bit of change
355 -> If you want to see more change you can in make it more reddish
359.051 -> It's your wish
360.586 -> I made it type of Maroon when I hover it it will show Maroon
364.805 -> If you want to see more then change the background colour
367.782 -> background-colour to the color it is showing
382.148 -> not changing, suppose on hover I want background colour
388.719 -> something like this, now background color is changing.
393.298 -> But if you want to see more effective can do like this
397.74 -> I made it background colour white as I took arrow there
401.381 -> With that I will make its colour black more darker
406.878 -> so that looks like same. See it's color gone when hovered.
411.222 -> So, you can make this type of designs
414.296 -> If you want to make background yellowish then you can do that
417.917 -> I will show you how to do it suppose Orange like this
423.14 -> And I am not making layout but I want to show you how to do this
427.973 -> So contact us and read more are done here
433.587 -> Now what will happen? we have given all the properties here.
437.365 -> I have given a:hover means
439.893 -> when you bring arrow on it then what should happen
441.893 -> Then there is another pseudo selector a:visited
444.889 -> The visited link behave differently means
447.573 -> Once you open a link it will become visited like suppose
451.546 -> I make this link google.com
457.238 -> We have studied about links already
459.101 -> I click on it and come back it means it is visited
463.074 -> Now as it is visited I can add more properties on it like colour
471.424 -> Suppose a colour which looks weird like yellow
477.625 -> I can add it and it became yellow because it is visited
482.008 -> And likewise we have active
484.711 -> If I write a:active here what will happen?
489.426 -> Suppose I want to make colour dark blue
493.868 -> Save and as I clicked on it, it became dark blue
497.099 -> And let me change background instead of colour
498.708 -> so you can look clearly. So, here
503.013 -> I'll write background colour whenever I have written colour
506.615 -> So that it look clearly. So, right now background-color is yellow
510.119 -> As I clicked whatever is written in a:active will come.
516.514 -> I had written background blue in a:active and then I clicked
519.882 -> So it opened, click back and as it is visited it changed to yellow
523.269 -> If I change this link
527.906 -> To goodgirl.com as it is not visited it is showing red
531.879 -> Once I visited it, opened it and goodgirl.com is nothing
536.478 -> Hence will make facebook.com
541.018 -> Clicked it, it is visited now and looking like this
545.812 -> Reloaded, clicked, it is visited now so showing yellow
549.532 -> And with Facebook suppose I write yahoo.com
554.052 -> Saved it, it is not visited but as I visited it will turn yellow
558.181 -> See it turned yellow because it is visited
560.376 -> So, these are pseudo selectors in a I write active with colon
563.939 -> a:hover, Similarly I can add pseudo selector in btn
569.045 -> I can write what should happen on btn:hover
576.783 -> colour should change to this.
579.837 -> and background color to this.
584.865 -> I have written anything for change.
587.412 -> See, when I hovered it background-color is changing.
592.069 -> See, here too. You can add this type of effects,
594.811 -> I have not made effects very cool right now.
596.362 -> But we will make more beautiful effects if you go in Bootstrap
600 -> Bootstrap is a Framework if you don't know
603.934 -> There too they have defined such type of classes
607.634 -> So whenever you see a button you will see like this
611.334 -> If you go in button I am finding button
615.913 -> See when I bought arrow on this it's background turned darker
619.847 -> See.
623.663 -> So to make this type of effects You only need CSS nothing much
629.785 -> So when you take your Arrow there you will get the effect too
633.582 -> Have added border radius and font may be
637.203 -> We can change fonts too. If you want to change font
640.864 -> Then you can do that too. Suppose in btn
645.56 -> I will write font-family: and here any good font I am finding
656.427 -> Let's see this one. Yes looking good.
661.826 -> And here I can make font-weight: bold;
665.467 -> So that buttons look darker if you want like that
669.284 -> And if you don't want you can increase your font only
671.987 -> So we can design our buttons like this and
675.394 -> Design button like this or anything that you want
679.406 -> Maybe you want when someone click on it border turns none
683.047 -> You can do that too. If you want to show border on hover
686.414 -> then you can write here border: 2px solid black;
692.458 -> So as someone will bring arrow on it border will come. See.
698.229 -> If you want to create effect like this you can do
701.245 -> I hope you have understood this video
703.518 -> If you haven't accessed this playlist then please do
707.608 -> And there are more things on my channel like recent video
712.031 -> In which I have told that which
713.895 -> is the best programming language to learn in 2020
716.227 -> So do watch that too if you haven't watched
718.93 -> And many questions about which programming language to learn
724.134 -> Which are the top three frameworks one should learn
726.251 -> Top three programming languages which are not great to learn
730.478 -> And 3 programming language which you should include in 2020
735 -> Learn this 3 compulsorily even if you don't learn anything else
737.41 -> So you can open and make target
741.051 -> I hope you have understood this video and with that
744.902 -> You might have accessed the playlist
747.019 -> If you find the videos helpful and good don't forget to like
750.172 -> And with that access playlist, bookmark it and save it.
755.239 -> That's it for this video
757.005 -> Thank you so much for watching this video
758.868 -> And I will see you next time
Source: https://www.youtube.com/watch?v=3lAl7RNqp1c