How I Got Off the Ground with my Hello button and the Finished Product

Gillian Floyd — Mon, 24 Feb 2020 20:56:35 +0000

When thinking about what I wanted to design for my class, I wanted to do a project that was somewhat a beginner stage but hard enough to test my skills in HTML/CSS. I decided to put a div on the page, and then I asked myself, “What have I learned to make in class so far that would be interesting?”. Then it hit me, a button! It’s simple because it’s already a tag in HTML, but I can make it more interesting by adding the word “Hello” and some cool colors.

This is the HTML for this button...

<div>
    <button>Hello</button>
</div>

Now, to incorporate CSS, I had to look up some of CSS properties and values to those properties. I started with the whole div tag. In my design, the button will be the only thing on the screen so I would want to center it in the middle of the page. I used the property “display” which has two values: “inline-flex” and “flex”. I chose “flex” because I need the button to align in the center of the page and it must be centered from top-to-bottom. I wanted the button not to stick to the top of the workspace.I started with the “margin”, but I needed to be more specific which was using “margin-top”. This means that left, right, and bottom were all set to their default value. Lastly, in the div tag I have ”justify-content” this also has many properties like “center”, “flex-end”, “flex-start”, “start”, and more. I used the value “center” so that it would be centered from side-to-side.

This is the code I produced for the div...

div {
    display: flex;
    margin-top: 60px;/*I used 60px becasue the way my view was 50px looked too high.*/
    justify-content: center;
}

This is the main div, so I could place the button where I needed it. Now I’m ready to change up the button, because right it’s extremely small.

To make it bigger, I need to look into using “padding” and “margin” to see which one would be the best to use. On the hunt to find the information, I realized that margin is the outer space around an element. This would not work at all because I need the element itself. The “padding” is the inner space of an element. Padding is the one I needed.

I used padding with a value of 20px.Now I need to change the font-size.he default for“font-size” is 16px, but I want it to be almost double. The last property I want to put into the button selector is transition. The transition property takes in a value of seconds, this only tells me how long the transition will take. But I can control the speed of a transition by using values like "ease", "ease-in", "ease-out", "ease-in-out", "linear", and "cubic-bezier(n,n,n,n)". Each of these values have a certain speed they go.

Here is the code for the button selector I decided to use...

button {
    padding: 20px;
    font-size: 30px;
    transition: 1.3s ease;
}

One more thing to add in css and I will have my button ready!. I wanted the button to hover or move when I put my mouse on it so I wrote “button:hover”. After I added the selector on the button, I decided to add a creative background. The background property has a number of values to it, but the value I want is Linear-Gradient(). Linear-Gradient is a function used in CSS to transition between two or more colors along a straight line. I looked up the hex-codes for the colors I wanted and eventually found a rainbow pattern that I liked.

Here are the hex codes:

button:hover {
    background: linear-gradient(217deg, rgba(255,5,0,.8), rgba(255,0,5,0) 70.71%),
                            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                            linear-gradient(336deg, rgba(0,5,255,.8), rgba(0,0,255,0) 70.71%);
}

This is how I got the rainbow effect on my button!The first values, which are degrees, are how far to the left or right that the colors goes, and if they overlap then they blend the colors together.

For the rest of the button, I want the text-color to be black even on the hover. Then I had the font-weight, that I want to be bold so it looks like my box is the only object on the page that is getting bigger. The next thing I did was added a text-shadow. This does exactly what it says it does, which adds a shadow to the text. This looks really good when I have the button with the selector hover. When looking at the text-shadow property, the first three values are H-shadow, V-shadow, and a blur radius. The H-shadow is the horizontal shadows based off of a position that is going side-by-side. The V-shadow is the vertical shadows based off of a positions that is going up and down. The blur radius is the about of blurred that is added to the item or object in the codepen or website this is mainly focusing on the text. The higher the number on the blur radius, the more blurred the item is and viscera.

The last two things I added to finish up my first codepen button was the box-shadow and the transform property. For the box-shadow, I have two or up to four values which are the length of the shadow. If I only have two values these are the offset-x and offset-y, the third value is the blur-radius, and the fourth value is going to be a color that I wanted the shadow to be.

The transform property is the last property to make the button hover. For this I used translateY and the value is going to be -10, because I wanted it to translate up on the y-axis and ten degrees up instead of down or sideways on the x-axis. The other values for this property would be scale, skew, matrix and many more.

These two properties look like this in a code snippet.

button:hover {
    box-shadow: 0px 15px 20px grey;
    transform: translateY(-10deg);
}

The final button looks like its on hover

If you would like to see this button in action this go to this link https://codepen.io/gillianfloyd2001/pen/bGbWqMo .

DEV Community: Gillian Floyd

How I Got Off the Ground with my Hello button and the Finished Product

Thank you so much for reading this!!!