- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
97 Views
You can try to run the following code to vertically align the grid using the align-content property −ExampleLive Demo .container { display: grid; background-color: gray; align-content: center; padding: 20px; grid-gap: 20px; } .container > div { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
![Smita Kapse](https://www.tutorialspoint.com/assets/profiles/13597/profile/60_103706-1512718957.jpg)
159 Views
Align flex lines with CSS align-content property. You can try to run the following code to implement the align-content property. It adds space around the items:ExampleLive Demo .mycontainer { display: flex; background-color: orange; align-content: space-between; height: 150px; width: 600px; flex-wrap: wrap; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
104 Views
Use the align-items property with value flex-start to align flex items on the top.ExampleYou can try to run the following code to implement the flex-start value −Live Demo .mycontainer { display: flex; height: 300px; background-color: red; align-items: flex-start; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
89 Views
Use the justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value −Live Demo .mycontainer { display: flex; background-color: red; justify-content: flex-end; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
113 Views
Use the justify-content property with value flex-start to align the flex-items at the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo .mycontainer { display: flex; background-color: red; justify-content: flex-start; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
67 Views
You can try to run the following code to align the grid inside the container using the justify-content property:ExampleLive Demo .container { display: grid; background-color: gray; grid-template-rows: 120px 90px 100px; justify-content: space-evenly; padding: 20px; grid-gap: 20px; } .container > div { background-color: yellow; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
748 Views
You can try to run the following code to fade in on button hover with CSSExampleLive Demo .btn { background-color: orange; color: white; padding: 10px; text-align: center; font-size: 16px; margin: 5px; opacity: 0.5; transition: 0.5s; display: inline-block; text-decoration: none; cursor: pointer; } .btn:hover { opacity: 2 } Result
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
5K+ Views
To set the button width, use the CSS width property.ExampleYou can try to run the following code to set the width of a button −Live Demo .btn { background-color: yellow; color: black; width: 120px; text-align: center; font-size: 15px; padding: 20px; border-radius: 15px; border: 3px dashed blue; } Result Click below for result: Result
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
2K+ Views
In order to allow users to interact with a website or application, buttons are an essential component of web design. The user experience can be greatly improved and interactions made more interesting by adding a visually beautiful and innovative click effect to button using CSS. The active pseudo-class can be used to create a pressed effect on a button click using CSS. This style provides visual feedback by defining how the button will look when it is clicked. Before knowing more about it, let’s have a quick view about button in HTML. HTML button In HTML, the clickable button ... Read More