How I Got Off the Ground with my Hello button and the Finished Product
Published: 2020-02-24 20:56:35


<p>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.</p>
<p>This is the HTML for this button...</p>
<pre><code>&lt;div&gt;
    &lt;button&gt;Hello&lt;/button&gt;
&lt;/div&gt;</code></pre>
<p>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.</p>
<p>This is the code I produced for the div...</p>
<pre><code>div {
    display: flex;
    margin-top: 60px;/*I used 60px becasue the way my view was 50px looked too high.*/
    justify-content: center;
}</code></pre>
<p>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.</p>
<p>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.
</p>

<p>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 &quot;ease&quot;, &quot;ease-in&quot;, &quot;ease-out&quot;,
    &quot;ease-in-out&quot;, &quot;linear&quot;, and &quot;cubic-bezier(n,n,n,n)&quot;. Each of these values have a
    certain speed they go.</p>
<p>Here is the code for the button selector I decided to use...</p>
<pre><code>button {
    padding: 20px;
    font-size: 30px;
    transition: 1.3s ease;
}</code></pre>

<p>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.</p>
<p>Here are the hex codes:</p>
<pre><code>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%);
}</code></pre>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>These two properties look like this in a code snippet.</p>
<pre><code>button:hover {
    box-shadow: 0px 15px 20px grey;
    transform: translateY(-10deg);
}</code></pre>
<p>The final button looks like its on hover</p>
<p> If you would like to see this button in action this go to this link https://codepen.io/gillianfloyd2001/pen/bGbWqMo .</p>
<h3>Thank you so much for reading this!!!</h3>